Changing the text of a buton

Hi,
I want that on click of a button, the display of the button should change.
The scenario is,
1) Click on the button - Initial the text of button is + sign.
2) The button text should change to - sign and a js method should be called to display some text in a div
3) Again on click of that button + sign should change to - sign.

Regards,
Sulabh

Hi,
This can be done using below code:

definition of button

on onclick function the below code can be

Let me know if this helps your requirement.

Please take the time to choose the correct forum for your posts. This forum is for questions on JSP. For more information, please read this.

This post has been moved to a more appropriate forum.

The code sent is not working. I understand it should but somehow it is not calling the function on click.
<input type="button" value="+" id="myButton1" onclick="fnClick();"></input>
<script language="text/javascript">
function fnClick(){
if(document.getElementById("myButton1").value == "+")
document.getElementById("myButton1").value="-";
else
document.getElementById("myButton1").value="+";
}
</script>

sulabh kapoor wrote:Not working..

Please read this.

And, be sure to use code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please read this for more information.

You can go back and change your post to add code tags by clicking the

button on your post.

Please try the below.

Hey the code worked.
The only problem was "type" keyword in script where I had written "language". Thanks for the help

If that is literally all you need to do on a button click here is a nice jQuery'fied shortened version of the code required. Even if you have to do more than just change the value of the button, jquery can sure shorten your keystrokes.

Note that Gregg's code also employs the best-practice principle of Unobtrusive JavaScript wherein no script is embedded in structural markup (in other words, avoiding onclick and the like).

Need help, I guess I am missing something which I am not able to make out.
Please see

<input type="button" value="+" id="inputButton" />
<a href="Places.html" target="frmContent">Places</a><br><br>
<input type="button" value="+" id="inputButton"></input>
<a href="Hotels.html" target="frmContent">Hotels</a><br><br>

<script type="text/javascript">
$(function(){
$('#inputButton').click(function(){
$(this).val()=='+' ? $(this).val('-') : $(this).val('+');
});
});
</script>

The label is not changing

Please be sure to use code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please read this for more information.

You can go back and change your post to add code tags by clicking the

button on your post.

sulabh kapoor wrote:Need help, I guess I am missing something which I am not able to make out.
Please see

<html>
<head>
<script type="text/javascript">

$(function(){
$('#inputButton').click(function(){
$(this).val()=='+' ? $(this).val('-') : $(this).val('+');
});
});
</script>
</head>
<title>Links</title>
<body link="black" vlink="black">

<input type="button" value="+" id="inputButton"></input>
<a href="Places.html" target="frmContent">Places</a><br><br>
<input type="button" value="+" id="inputButton"></input>
<a href="Hotels.html" target="frmContent">Hotels</a><br><br>

</body>
</html>
</script>

The label is not changing