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
– Jeffrey Bosboom, Commented Feb 20, 2015 at 2:50
Your if expression should not have a semicolon after == "on") — Jagtesh Chadha
– Jagtesh Chadha, Commented Feb 20, 2015 at 2: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
– elmo330, Commented Feb 20, 2015 at 2: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. — user663031
– user663031, Commented Feb 20, 2015 at 3:31

Oli Soproni B. · Accepted Answer · 2015-02-20 03:50:38Z

4

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

answered Feb 20, 2015 at 3:50

Oli Soproni B.

2,8103 gold badges24 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arunprasanth K V · Accepted Answer · 2015-02-20 05:20:02Z

1

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>

edited Feb 20, 2015 at 5:20

Arunprasanth K V

22.2k8 gold badges51 silver badges80 bronze badges

answered Feb 20, 2015 at 4:23

varad mayee

6197 silver badges19 bronze badges

Comments

TResponse · Accepted Answer · 2015-02-20 04:44:17Z

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, 2015 at 4:44

answered Feb 20, 2015 at 2:45

TResponse

4,1537 gold badges48 silver badges66 bronze badges

2 Comments

user663031 Over a year ago

You've left in the spurious semi-colon after the first if statement, which will cause the parser to choke.

TResponse Over a year ago

Ah yes right you are - I have corrected it - just a typo!

Mayuresh Patil · Accepted Answer · 2016-12-08 18:56:11Z

0

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

answered Dec 8, 2016 at 18:56

Mayuresh Patil

2,1901 gold badge23 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to change button text on click using JavaScript?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related