• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 347
  • Last Modified:

How to change the text of a button

I have a button that when clicked hides / un-hides stuff.

I'd like to change the text of the button based on the state, such as "Click to show pics", then "Click to hide pics"

example here:
http://www.info-scroll.com/going_rogue_book_tour_phase_i/live_blogging_04_26_2010_morning.html
0
Alaska Cowboy
Asked:
Alaska Cowboy
  • 3
  • 3
  • 2
2 Solutions
 
Ultra_MasterCommented:
Hi,

Let's suppose this is your button:
<input type="button" value="Button Text" id="myButton1"></input>

You simply use this to change it's text:
document.getElementById("myButton1").value="New Button Text";

This is a test code that does exactly what you are looking for:
<html>
<head>
</head>
<body>
<script type="text/javascript"> 
function changeText(){
	if (document.getElementById("myButton1").value=="Click to show pics")	document.getElementById("myButton1").value="Click to hide pics";
		else document.getElementById("myButton1").value="Click to show pics";
}
</script>
<input type="button" value="Click to show pics" id="myButton1" onClick="changeText()"></input>

</body>
</html>

Open in new window

0
 
Alaska CowboyAuthor Commented:
Thanks, check it out now . . .
0
 
Dave BaldwinFixer of ProblemsCommented:
Give the submit button an 'id' and change the value when you hide and unhide the pics.

<input id="pictoggle" type="submit" value="Click for pics" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"/>

document.getElementById("pictoggle").value = "click to Hide Pics";

Open in new window

0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Alaska CowboyAuthor Commented:
Dave, thanks too, checking it out now.
0
 
Alaska CowboyAuthor Commented:
0
 
Ultra_MasterCommented:
Glad to hear that.

Regards,
Ultra_Master
0
 
Dave BaldwinFixer of ProblemsCommented:
Good job, I like the way you did that.
0
 
Ultra_MasterCommented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now