Javascript, add event listener to all buttons

Question

I am attempting to add event listeners to all of the buttons in an HTML document. When a button is pressed I'd like to display a simple alert. My code, which isn't working at the moment, follows:

var bns = document.getElementsByTagName("button");

function addtoev() {
  for (i = 0; i < bns.length; i++) {
    bns[i].addEventListener("click", function() {
        alert("you clicked"); 
    });
   }
}

It definitely works as such in JSFiddle by calling the method or eliminating the function line, but it's still not executing in Chrome (popups are not blocked). I post my HTML, is it possible that buttons nested in a table need to be referenced differently than buttons alone?

  <tr>
  <td>John</td>
  <td>Doe</td>
  <td>john@doe.us</td>
   <td><button class="btn btn-default">X</button></td>
  </tr>

Works just fine, if you call `addtoev()` ... http://jsfiddle.net/LGSon/zdfg2107/ — Asons, Nov 15 '15 at 19:50
or, simply, remove `function addtoev(){` row... and, of course, last `}`. — nelek, Nov 15 '15 at 19:52
Make sure to use `for (var i = 0`... otherwise you're leaking a global. — Jared Smith, Nov 15 '15 at 20:01
The issue is still that you actually need to call `addtoev`. That has nothing to do with your HTML. *"is it possible that buttons nested in a table need to be referenced differently than buttons alone?"* No. — Felix Kling, Nov 15 '15 at 20:22
Thanks, yes, have tried calling it but didn't change the results (although as mentioned it does work in JSFiddle). — eabates, Nov 15 '15 at 20:23

score 4 · Answer 1 · edited Nov 15 '15 at 19:59

4

you need to listen of the load event, like this:

function addtoev() {
  var bns = document.getElementsByTagName("button");
  for (i = 0; i < bns.length; i++) {
    bns[i].addEventListener("click", function() {
    alert("you clicked"); });
  }
}

window.addEventListener("load",function() {
  addtoev();
});

edited Nov 15 '15 at 19:59

Olivier Boissé

15,834
6
38
56

answered Nov 15 '15 at 19:52

nloomans

220
2
11

score 2 · Answer 2 · answered Nov 15 '15 at 20:23

better to use JQuery:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <input type="button" id="button1" value="button1" />
        <div>
            <input type="button" id="button2" value="button2" />
        </div>
        <input type="button" id="button3" value="button3" />

        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(":button").click(function (event) {
                alert(event.target.id + ' is click!');
            });
        </script>
    </body>
    </html>

Thanks, I'm sure it is but I'm a student tasked with doing everything the "hard way" as a learning exercise. — eabates, Nov 15 '15 at 20:25

score 1 · Answer 3 · answered Nov 15 '15 at 19:51

1

Maybe you should call the method addtoev()

answered Nov 15 '15 at 19:51

Olivier Boissé

15,834
6
38
56

score 1 · Answer 4 · answered Nov 15 '15 at 20:00

1

with jQuery: JS Fiddle

var bns = $("button");
bns.on("click", function() {
    alert("you clicked");
});

answered Nov 15 '15 at 20:00

Mi-Creativity

9,554
10
38
47

score 0 · Accepted Answer · answered Nov 15 '15 at 22:45

0

It seems that my problems were stemming from the fact that I was loading my JS file in the header, before all of the buttons were loading. I now have it working by loading my JS at the end of the body.

answered Nov 15 '15 at 22:45

eabates

878
1
8
22

Javascript, add event listener to all buttons

5 Answers5