addEventListener for loop doesn't respond

javascript for loop click event
foreach addeventlistener
event listener in a for loop
es6 addeventlistener
typescript addeventlistener
javascript addeventlistener to class
addeventlistener input
addeventlistener target

Please don't make it Duplicate, I just want to understand If I wrote my code wrong, All thought I checked it couple of times.

I can't understand way my code dosen't work.

Js:

var p1button = document.querySelector("#p1");
var p2button = document.getElementById("p1");

//p1 btn
for(var i = 0; i < p1button.length; i++){
    p1button[i].addEventListener("click", function(){
alert("clicked") });
 };

html:

   

<button id="p1">Player One</button>
         <button id="p2">Player Two</button>

My codepen

It doesn't work because p1button is already an ElementButton, not an Array where you have to use [0] to get the element from.

var p1button = document.querySelector("#p1");

p1button.addEventListener("click", function(){
  alert("clicked")
});
<button id="p1">Player One</button>

addEventListener using for loop and passing values, But when you run it, this code doesn't actually do what we want! add event listener for loop problem in JavaScript in browser. Instead of  allButtonsOnPage.forEach(function(button, index) { button.addEventListener('click', function() { logButtonIndex(index); }); }); This works because within each iteration of forEach() , a new scope is created, and the value of index is fixed to the correct value in that scope.

p1button is not an array but a DOM element.

Try keeping just:

p1button.addEventListener("click", function(){
   alert("clicked") 
});

Add event listener for loop problem in JavaScript, So I hava a simple 4 buttons and a loop attaching a click event to each buttonn. Why does this work with onclick but not the addEventListener. I have a jsFiddle  1 Answer 1. You need to put event listener mechanism inside closure, in laymen closure return value from inner function, you want your event listener should be present even after loop is executed or scope is finished.

From the documentation of querySelector():

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

Try it out (open up Developer Tools to see the console):

console.log(document.querySelector("button"));

So you don't need (and you can not) iterate over p1button, because it's a node instead of an array.

Adding Click Event Listeners In A Loop In JavaScript, The loop is the simplest one conceptually. You can call querySelectorAll() on all elements with a specific class, then use forEach() to iterate on  addEventListener, for(), index. how to use closure? (it doesn't respect the Browse other questions tagged javascript for-loop closures addeventlistener or ask

It's because querySelector and getElementById returns a single DOM element and not an array of DOM elements. So your for loop is useless and try to add an event listener on an undefined value.

Here is a correct way to listen for click event

var p1button = document.querySelector("#p1");    
p1button.addEventListener("click", function(){
  alert("clicked") 
});

Here you can find more infos about querySelector and getElementById.

addEventListener and closures - JavaScript, Is there any way to do that inside a for loop because in my code the event here as there are only 4 divs but 'var[4]' is 5th, which doesn't exists. The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.

How to add an event listener to multiple elements in JavaScript, To clarify - The mouseover event triggers the function that follows it - how then is the for loop being triggered if the addEventListener sits inside  The document.addEventListener() method attaches an event handler to the document. Tip: Use the document.removeEventListener() method to remove an event handler that has been attached with the addEventListener() method. Tip: Use the element.addEventListener() method to attach an event handler to a specified element.

Event Listener inside a For Loop, When I try to create a loop I get the error message "addEventListener isn't a can help me understand why the second example doesn't work? You actually can attach event listeners in a for loop. As you can see from this example, an event listener is successfully attached to each button, and the console is logged each time one of them is clicked. <button>One</button> <button>Two</button> <button>Three</button>.

How does the for-loop get triggered enclosing both event listeners , In this lesson, we'll show you how JavaScript's event loop works and how this The JavaScript runtime environment does this by prioritizing tasks between its Call Stack addEventListener("click", function(){ console.log("Clicked the first <p​>! Ran into an issue with this and the current version of jQuery — since jQuery checks for "window.addEventListener" to determine the type of event system, this code seems to break it in IE8 (jQuery then assumes that removeEventListener is also present).

Comments
  • Id's should be unique on a page, so p1button shouldn't be iterable
  • I've understood that buttons are like complex element that build out from couple of things and that's why I can't use the method you showed here, and I have to use a loop, can you check the answer to other question of mine here an explain it for me ? stackoverflow.com/questions/50592276/why-addeventlistener-only-work-with-for-loop?noredirect=1#comment88195402_50592276
  • So just to understand, there's node and array that is a nodeList?
  • So just to understand, there's node and array that is a nodeList?
  • @NadavHimmelfarb, sorry for naming mistake, I'm new in Javascript world, but here's the clarification: querySelector() returns an Element while querySelectorAll() returns NodeList, the latter can be iterated as an array (like you do in your example). See developer.mozilla.org/en-US/docs/Web/API/Document_object_model/…