HTML button not working with my javascript

Question

I am creating a button operated set of traffic lights, i have this HTML and JAVASCRIPT

var lightStates = {
  red: 0,
  amber: 1,
  green: 2
};
var currentState = lightStates.red;

document.getElementById('changeBtn').onclick = function() {
  changeState();
};


function changeState() {
  clear();
  switch (currentState) {
    case lightStates.red:
      {
        document.getElementById("red").className = "light red";
        currentState = lightStates.amber;
      }
      break;
    case lightStates.amber:
      {
        document.getElementById("amber").className = "light amber";
        currentState = lightStates.green;
      }
      break;
    case lightStates.green:
      {
        document.getElementById("green").className = "light green";
        currentState = lightStates.red;
      }
      break;
  }
}

function clear() {
  document.getElementById("red").className = "light off";
  document.getElementById("amber").className = "light off";
  document.getElementById("green").className = "light off";
}

<html>

<head>
  <script type="text/javascript" src=javasript.js></script>
</head>
<link rel="stylesheet" href="style.css">
<div class="traffic-light">
  <div class="light off" id="red"></div>
  <div class="light off" id="amber"></div>
  <div class="light off" id="green"></div>
</div>
<button id="changeBtn">Change</button>
<input type="button" id="changeBtn" onclick="changestate" </input>

</html>

and the lights on a css sheet, the problem I am having is that when i run the code in a browser, the button does not do anything at all, what am i getting wrong?

convert onclick="changestate" to onClick="changestate()"

J-J
– J-J

2016-11-09 15:10:32 +00:00
Commented Nov 9, 2016 at 15:10 — J-J
– J-J, Commented Nov 9, 2016 at 15:10
Check this link:-codedump.io/share/6BubpXSG1rX/1/…

Razia sultana
– Razia sultana

2016-11-09 15:15:48 +00:00
Commented Nov 9, 2016 at 15:15 — Razia sultana
– Razia sultana, Commented Nov 9, 2016 at 15:15

David · Accepted Answer · 2016-11-09 15:12:57Z

1

You're trying to invoke the function in two separate ways, both inline and as an event handler.
The markup is invalid, both with typos and with multiple identical id values.
The event handler is being assigned before the element actually exists.

Remove the duplicate button and the inline onclick and include the JavaScript after the element(s):

<input type="button" id="changeBtn"></input>
<script type="text/javascript" src="javasript.js"></script>

answered Nov 9, 2016 at 15:12

David

221k42 gold badges245 silver badges337 bronze badges

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

1 Comment

Dan Over a year ago

thank you so much, i can see the logic now and it is working perfectly

Captain Squirrel · Accepted Answer · 2016-11-09 15:10:54Z

1

remove this part of your html code

<button id="changeBtn">Change</button> <input type="button" id="changeBtn" onclick="changestate"</input>

Change it to this.

<button id="changeBtn" onclick="changestate()">Change</button>

I believe your issues are coming from not having a closing > on your input, not having () on your onclick call & having two elements with the same id.

answered Nov 9, 2016 at 15:10

Captain Squirrel

2375 silver badges16 bronze badges

Collectives™ on Stack Overflow

HTML button not working with my javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related