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?

Does it work? If not, what's wrong with it (be precise)? Do you just want style advice? — Jeffrey Bosboom, Feb 20 '15 at 02:50
Your if expression should not have a semicolon after `== "on")` — Jagtesh Chadha, Feb 20 '15 at 02:52
@JeffreyBosboom it's not working at all unfortunately! I just want to know why that may be. I thought I may be missing something someone could spot out — elmo330, Feb 20 '15 at 02:54
If you open your console, you will see a syntax error, most likely on the `else`. Did you open the console? Do you know how to open the console? You should learn that before you do anything else. — , Feb 20 '15 at 03:31

score 4 · Answer 1 · answered Feb 20 '15 at 03:50

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

score 1 · Answer 2 · edited Feb 20 '15 at 05:20

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>

TResponse · Answer 3 · 2015-02-20T04:44:17.010

0

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";
    }
}

edited Feb 20 '15 at 04:44

answered Feb 20 '15 at 02:45

TResponse

3,940
7
43
63

1

You've left in the spurious semi-colon after the first `if` statement, which will cause the parser to choke. – Feb 20 '15 at 03:28
Ah yes right you are - I have corrected it - just a typo! – TResponse Feb 20 '15 at 04:44

score 0 · Answer 4 · answered Dec 08 '16 at 18:56

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()">

How to change button text on click using JavaScript?

4 Answers4