Why the event doesn't execute?

Question

Hey guys could anyone explain why the event doesn't execute? The debugger doesn't give any error at all! Thank you in advance

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <button class="boton">prueba</button>
  <body>

<script type="text/javascript">

var elemento= document.getElementsByClassName("boton")
elemento.onclick=function(){
  alert("hola");
};
debugger;

</script>

  </body>
</html>

Use `var elemento= document.getElementsByClassName("boton")[0]` — Robin Mackenzie, Apr 08 '17 at 09:45
Possible duplicate of [JavaScript click event listener on class](http://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class) — Robin Mackenzie, Apr 08 '17 at 09:46

score 1 · Answer 1 · answered Apr 08 '17 at 09:47

The DOM method document.getElementsByClassName() returns an array. You must loop through the array items before assigning the onclick handler:

var elemento = document.getElementsByClassName("boton")
for (var i = 0; i < elemento.length; i++) {
  elemento[i].onclick = function() {
    alert("hola");
  };
}
debugger;

<button class="boton">prueba</button>

Alternatively, if you are selecting only one element, you can use document.querySelector():

var elemento = document.querySelector(".boton");
elemento.onclick = function() {
  alert("hola");
};
debugger;

<button class="boton">prueba</button>

Why the event doesn't execute?

1 Answers1