How to change button text on click using JavaScript?
Question
Only started JS a couple of days ago, and I'm already having some troubles getting a toggle to work. I want the button to toggle between on and off when clicked.
function click() { var change = document.getElementById("toggle"); if (change.innerHTML == "on"); { change.innerHTML = "off"; } else { change.innerHTML = "on"; } }
<button type="button" id="toggle" onClick="click()">on</button>
Is this how I should go about it?
4 answers
solution1
2 2015-02-20 03:50:38
try this
<!DOCTYPE html>
<html>
<body>
<button id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
</body>
</html>
define your function to be unique as always and not make use of the javascript function/reserve words just a recommendation/suggestion
solution2
1 2015-02-20 04:23:23
Your having mistake in the if statement,there is no semicolon after if statement write the code as like below
<button name="toggle" id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
solution3
0 2015-02-20 02:45:09
You can do this:
<button type = "button" id= "toggle" onClick = "click()">on</button>
function click()
{
var change = document.getElementById("toggle");
if (change.value == "on")
{
change.value = "off";
}
else
{
change.value = "on";
}
}
or by doing this:
function click()
{
if (this.value=="on")
{
this.value = "off";
}
else
{
this.value = "on";
}
}
solution4
0 2016-12-08 18:56:11
It will work for you
function myFunction()
{
var change = document.getElementById("toggle");
if (change.value=="off") change.value = "on";
else change.value = "off";
}
for button
<input type="button" value="on" id="toggle" onclick="myFunction()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.