CODEWITHSUNDEEP
javascriptonclickdom-eventsaddeventlistener
SLaG
SLaG

Reputation: 166

onclick event not firing or not being subscribed to with buttons in a loop

I'm trying to get an array of button's click events subscribed to and then to redirect by pulling the location from an attribute. I had trouble getting this to work and now it has boiled down to the following...

function pushButton() {
    window.alert('Hello World');
}

var listButtons = document.getElementsByClassName('btn');

for (var i = 0; i < listButtons.length; i++) {
    listButtons[i].addEventListener('click', pushButton, false);
}

This is in script tags at the bottom of page (after the buttons have been declared).

I've also tried...

...
for (var i = 0; i < listButtons.length; i++)
    listButtons[i].onclick = function(i) {
        return function() {
            alert('Hello World');
        }
    }(i);
}

and...

...
(function(i) {
    listButtons[i].onclick = (function() {
        window.alert('Hello World');
})})(i);

based on other examples I've seen around. The problem is that nothing happens when a button is clicked on. I've used developer view in Chrome to look for errors but it hasn't shown any. I've also tried in Firefox and IE to no avail.

I did have a couple of examples that would fire all the events using onclick and I get that it is due to the event firing when being subscribed to. But even after that, the button doesn't do anything. I was using onclick but now I've moved to addEventListener which doesn't have a different result.

I'm trying to avoid jQuery and just use vanilla Javascript.

Upvotes: 0

Views: 848

Answers (4)

SLaG
SLaG

Reputation: 166

In attempt to remove all possible causes, I started to strip out all javascript functions and events to narrow things down.

It turns out the issue was being caused by an function being called in the body onload event. This function changes the position of the buttons by manipulating the innerHTML of the containing div. When the innerHTML was rewritten, it destroys all the event listeners.

This caused no event listeners and no errors symptoms that was being seen. The original code worked fine once the onload event was modified to add the event listeners again.

Upvotes: 1

jediliang
jediliang

Reputation: 19

your code work fine on my computer, fllow is my code.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
    </head>
    <body>
      <div>
        <input type="submit" class="btn" value="btn1"></input> 
        <form>
            <input type="text"></input> 
            <input type="text"></input> 
            <input type="submit" class="btn" value="btn2"></input> 
            <input type="submit" class="btn" value="btn3"></input> 
       </form>  
      </div>
    </body>
    <script type='text/javascript'>
        function pushButton() {
            window.alert('Hello World');
        }

        var listButtons = document.getElementsByClassName('btn');

        for (var i = 0; i < listButtons.length; i++) {
            listButtons[i].addEventListener('click', pushButton, false);
        }
    </script>
</html>

Upvotes: 1

Tomer Almog
Tomer Almog

Reputation: 3868

If you included the JavaScript before the body (in the head) it won't work. the binding is happening before the DOM is ready.

If you put the JavaScript at the bottom of the page just before it will work.

Another work around this is using jQuery document ready

$(document).ready(function(){
    $('.btn').on('click',function(){
        alert('Hellow World');
    });

});

Upvotes: 0

Arnelle Balane
Arnelle Balane

Reputation: 5487

I tried to replicate your first code example and got it to work like this:

function pushButton() {
    alert('Hello World');
}

listButtons = document.getElementsByClassName('btn')

for (var i = 0; i < listButtons.length; i++) {
    listButtons[i].addEventListener('click', pushButton);
}

Upvotes: 1

Related Questions