HTML Javascript button not working

Question

Hello friends I am new to learning HTML I am trying to make a basic website but I can't get a button which changes the sites background and the button text value to work please help!

<!DOCTYPE html>
<html>
  <body>

    <script type="text/javascript">
      function lightsOff()
      {
        if (document.getElementbyID("btnLights").value == "Lights Off") {
          document.body.style.backgroundColor = "#151515";
          document.getElementbyID("btnLights").value = "Lights On";
        }
        else {
          document.body.style.backgroundColor = "#FFFFFF";
          document.getElementbyID("btnLights").value = "Lights Off";
        }
      }
    </script>

  <center>

    <input type="button" id="btnLights" onclick="lightsOff()" value="Lights Off"></input>
  </center>

</body>
</html>

I'm sure its just something silly but I am new and need help!

The right way is: getElementById. Javascript is case sensitive. You're probably getting errors in the console. Check it. — emerson.marini
– emerson.marini, Commented Oct 17, 2013 at 18:21
This was it! Thanks so much I shouldn't have copied the code from a different answer, I'm not using anything with a console just notepad. — Ser Davos
– Ser Davos, Commented Oct 17, 2013 at 18:23
I recommend finding a good IDE or Programmers notepad. It helps find errors such as that :-) — buzzsawddog
– buzzsawddog, Commented Oct 17, 2013 at 18:32

defau1t · Accepted Answer · 2013-10-17 18:23:26Z

2

You are almost there, Just replace getElementbyID with getElementById

Here you have a DEMO

answered Oct 17, 2013 at 18:23

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

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

Comments

HC_ · Accepted Answer · 2013-10-17 18:23:13Z

0

1) getElementById is the proper syntax, not ID

2) Not sure on this, but you may need your script to be underneath your HTML elements, so that they exist when it is parsed by the browser for the first time. Someone can correct me on this though if it's inaccurate.

answered Oct 17, 2013 at 18:23

HC_

1,08011 silver badges24 bronze badges

Comments

emerson.marini · Accepted Answer · 2013-10-17 18:26:19Z

0

Javascript is case sensitive. Just replace getElementbyID with getElementById and things will just work.

answered Oct 17, 2013 at 18:26

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

Comments

Manwal · Accepted Answer · 2013-10-17 18:27:44Z

0

you have done just smaller mistake of spelling.

here : document.getElementbyID //your code

correct syntex is : document.getElementById // correct code

replace "document.getElementbyID" by this "document.getElementById"

answered Oct 17, 2013 at 18:27

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Collectives™ on Stack Overflow

HTML Javascript button not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related