aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Changing the text of a buton Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Changing the text of a buton" Watch "Changing the text of a buton" New topic
Author

Changing the text of a buton

sulabh kapoor
Greenhorn

Joined: Oct 10, 2009
Posts: 16
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
Praveen Rajendran
Greenhorn

Joined: Dec 25, 2009
Posts: 21
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.


Thanks & Regards,
Praveen
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

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.

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
sulabh kapoor
Greenhorn

Joined: Oct 10, 2009
Posts: 16
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>
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

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.
Praveen Rajendran
Greenhorn

Joined: Dec 25, 2009
Posts: 21
Please try the below.

sulabh kapoor
Greenhorn

Joined: Oct 10, 2009
Posts: 16
Hey the code worked.
The only problem was "type" keyword in script where I had written "language". Thanks for the help
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15300
    
    6

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.



GenRocket - Experts at Building Test Data
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

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).
sulabh kapoor
Greenhorn

Joined: Oct 10, 2009
Posts: 16
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
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61766
    
  67

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
Greenhorn

Joined: Oct 10, 2009
Posts: 16
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 fnClick(){
if(document.getElementById("Places").value == "+"){
//alert("inside function");
document.getElementById("Places").value="-";
//alert("during the function");
document.getElemendById("divPlaces").style.display="show";
}
if(document.getElementById("Places").value == "-"){
document.getElementById("Places").value="+";
document.getElemendById("divPlaces").style.display="none";
}
if(document.getElementById("Hotels").value == "+"){
//alert("inside function");
document.getElementById("Hotels").value="-";
//alert("during the function");
document.getElemendById("divPlaces").style.display="show";
}
if(document.getElementById("Hotels").value == "-"){
document.getElementById("Hotels").value="+";
document.getElemendById("divPlaces").style.display="none";
}

} -->
$(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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Changing the text of a buton