How to add eventListener function to elements with unique id?

Question

I have some dynamic cards:

and I want to add eventListener to all play buttons (their code is):

<a href="link">
    <img src="play.svg">
    <audio src="myMusic.mp3"></audio>
</a>

When I click to "play", it should look like below:

(it should change image and should also play audio)

My JS code so far done is:

<script>
var imgsPlay = document.getElementsByClassName('play-img-loop');
var audioPlayers = document.getElementsByClassName('audio-player');

window.onload = function() {
        for(var i = 0; i < imgsPlay.length; i++) {
            imgsPlay[i].addEventListener('click', function(event) {

                if(this.getAttribute('src') == "img/icons/play.svg") {
                    this.setAttribute('src', "img/icons/play_red.svg");
                    audioPlayers[i].play();

                } else if(this.getAttribute('src') == "img/icons/play_red.svg") {
                    this.setAttribute('src', "img/icons/play.svg");
                    audioPlayers[i].pause();
                }
                
            });
        }    
    }

</script>

(I can do it manually, but) can not dynamically. How can I do this ?

Please add your javascript code that you tried and show your efforts in this, [I downvoted](http://idownvotedbecau.se/noattempt/) — I_love_vegetables, Jul 28 '21 at 06:04
Can you please post the javascript code which you have done for dynamic addition of dom — Vijay, Jul 28 '21 at 06:07
Also don't add event handlers to several things. Instead delegate from the nearest static container — mplungjan, Jul 28 '21 at 06:09
This is not hard at all, you should at least try. SO is not a "Free development platform" — Gert B., Jul 28 '21 at 06:09
I have problem with passing argument to the inner function. The variable "i" is not shown in the inner function — Gamer In The Game, Jul 28 '21 at 06:11
Closure [Dupe](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) - you can avoid this completely using delegation — mplungjan, Jul 28 '21 at 06:38

mplungjan · Answer 1 · 2021-07-28T06:34:55.807

You need to delegate! If not, then your question is just a dupe of JavaScript closure inside loops – simple practical example

Here I assume you have a container called cardContainer

I am a little confused as to _red means playing or paused, so change the code below to match. Your example HTML does not match the code you show, there are no classes on the player and image, I therefor assume you do have those in the actual code

window.addEventListener('load', function() {
  document.getElementById('cardContainer').addEventListener('click', function(e) {
    const tgt = e.target;
    if (tgt.classList.contains('play-img-loop')) {
      const src = tgt.getAttribute('src');
      const running = src.includes('_red');
      const audioPlayer = tgt.closest('a').querySelector('audio');
      tgt.setAttribute('src', `img/icons/play$(running?'':'_red').svg`);
      if (running) audioPlayer.pause();
      else audioPlayer.play();
    }
  });
});

score 0 · Accepted Answer · answered Jul 28 '21 at 06:25

0

Your problem is the incorrect handling of closures. The event listener call back will never get the correct value of i by the way you have written it. The value of i will always be the last one when the events are fired.

The easiest workaround is to define the variable i only for the scope of a single iteration - which is what the let do.

    for(let i = 0; i < imgsPlay.length; i++) {
        imgsPlay[i].addEventListener('click', function(event) {

            if(this.getAttribute('src') == "img/icons/play.svg") {
             ...
    }

Useful reference: setTimeout in for-loop does not print consecutive values

answered Jul 28 '21 at 06:25

Charlie

22,886
11
59
90

It is highly recommended to not even have that problem simply by delegating to a static container as I suggest in my answer – mplungjan Jul 28 '21 at 06:33
Thanks, it solved problem. "var" didn't work but "let work", could you explain why is it like this ? – Gamer In The Game Jul 28 '21 at 06:35
1

[DUPE](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – mplungjan Jul 28 '21 at 06:38

How to add eventListener function to elements with unique id?

2 Answers2