Javascript click event listener not firing

Question

I am trying to make a calculator and I need to assign the click event to the inputs. However I am new to JavaScript and I am not able to figure out why it is not working.

 onLoad = function assign() { var C = document.querySelectorAll('.click'); for (i = 0; i < C.length; i++) { C[i].addEventListener('click'); alert('bob'); } } 

 <div style="max-width: 960px; margin: 0px auto; background-color: green;"> <section id="cal-container"> <form name="calculator"> <input type="text" name="answer"> <br> <input class="click" id="1" type="button" value=" 1 "> <input class="click" id="2" type="button" value=" 2 "> <input class="click" id="3" type="button" value=" 3 "> <input class="click" id="+" type="button" value=" + "> <br> <input class="click" id="4" type="button" value=" 4 "> <input class="click" id="5" type="button" value=" 5 "> <input class="click" id="6" type="button" value=" 6 "> <input class="click" id="-" type="button" value=" - "> <br> <input class="click" id="7" type="button" value=" 7 "> <input class="click" id="8" type="button" value=" 8 "> <input class="click" id="9" type="button" value=" 9 "> <input class="click" id="*" type="button" value=" * "> <br> <input class="click" id="v" type="button" value=" C "> <input class="click" id="0" type="button" value=" 0 "> <input class="click" id="=" type="button" value=" = "> <input class="click" id="/" type="button" value=" / "> <br> </form> </section> </div> 

Answer 1

Typically your script tag(s) should be inside of your body tag.

Rather than just onLoad you may have wanted to use window.onload , note the lowercase L as well.

Lastly, when using addEventListener the second argument should be a function that will be called whenever the event is triggered.

 window.onload = function assign() { var C = document.querySelectorAll('.click'); for (i = 0; i < C.length; i++) { C[i].addEventListener('click', function() { alert('bob'); }); } } 

 <div style="max-width: 960px; margin: 0px auto; background-color: green;"> <section id="cal-container"> <form name="calculator"> <input type="text" name="answer"> <br> <input class="click" id="1" type="button" value=" 1 "> <input class="click" id="2" type="button" value=" 2 "> <input class="click" id="3" type="button" value=" 3 "> <input class="click" id="+" type="button" value=" + "> <br> <input class="click" id="4" type="button" value=" 4 "> <input class="click" id="5" type="button" value=" 5 "> <input class="click" id="6" type="button" value=" 6 "> <input class="click" id="-" type="button" value=" - "> <br> <input class="click" id="7" type="button" value=" 7 "> <input class="click" id="8" type="button" value=" 8 "> <input class="click" id="9" type="button" value=" 9 "> <input class="click" id="*" type="button" value=" * "> <br> <input class="click" id="v" type="button" value=" C "> <input class="click" id="0" type="button" value=" 0 "> <input class="click" id="=" type="button" value=" = "> <input class="click" id="/" type="button" value=" / "> <br> </form> </section> </div> 

Answer 2

Your event listener is incorrectly formatted. An even listener takes two arguments. Argument one is which type of event to listen for (you have that correct) but the second argument is the function to call when the event happens. So take a look at the event listener docs and look at their structure.

Try something like this:

enter code here  C[i].addEventListener('click', function(){the stuff in here will be executed when the event occurs});