my javascript loop triggeres all 12 data-attributes at once

Question

so i have been trying to make a music playlist program that, and i have been trying to make it trigger each song independantly(just like how all music players do) but my script seems to work only when i have only one song in my html, so when i added 12 songs and ordered them with data-attribute and then tried to click the button nothing happened and then i tried to use console.log to check what happened and apparently all 12 songs got triggered at once here is my javascript

    const songs = document.querySelectorAll("[data-songs]");
    const icons = document.querySelector("#icon");

    songs.forEach((song) => {
      icon.addEventListener("click", function () {
        console.log(song);
        //put code of icon here
        if (mySong.paused) {
          mySong.play();
          icon.src = "/images/pause.png";
        } else {
          mySong.pause();
          icon.src = "/images/play.png";
        }
      });
    });

and here is my html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/css/styles.css" />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <title>Music App</title>
      </head>
      <body>
        <div class="music-container">
          <div class="music-header">
            <i class="fa fa-angle-left"></i>
            <div class="title">
              <p>My Music</p>
            </div>
            <i class="fa fa-search"> </i>
          </div>
          <div class="music-playlist">
            <div class="music-menu text-center">
              <div class="menu">
                <ul>
                  <li><a href="#">Songs</a></li>
                  <li><a href="#">Albums</a></li>
                  <li><a href="#">Artist</a></li>
                  <li><a href="#">Generes</a></li>
                </ul>
              </div>
            </div>
            <div class="music-box">
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="1">
                    <source src="/music/a.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="2">
                    <source src="/music/b.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="3">
                    <source src="/music/c.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="4">
                    <source src="/music/d.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>burzum</h6>
                  <audio id="mySong" data-songs="5">
                    <source src="/music/e.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="6">
                    <source src="/music/f.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="7">
                    <source src="/music/g.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="8">
                    <source src="/music/h.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="9">
                    <source src="/music/i.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="10">
                    <source src="/music/j.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="11">
                    <source src="/music/k.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="12">
                    <source src="/music/m.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
            </div>
          </div>
          <div class="music-play">
            <div class="play-image">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="play-controls">
              <div class="controls">
                <div class="song-name">
                  <h5>Dunkelheit</h5>
                  <p>Burzum</p>
                </div>
                <div class="play-icon">
                  <i class="fa fa-step-backward"> </i>
                  <i class="fa fa-play"> </i>
                  <i class="fa fa-step-forward"> </i>
                </div>
              </div>
              <div class="music-progress">
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src="/Script/jquery-3.6.0.min.js"></script>
        <script src="/Script/script.js"></script>
      </body>
    </html>
    ```

An ID must be unique. You cannot use <audio id="mySong" data-songs="12"> 12 times. Define it as a class. — Gerard
– Gerard, Commented Nov 29, 2021 at 18:03

I wrestled a bear once. · Accepted Answer · 2021-11-29 18:10:41Z

You can't have duplicate ID's, all ID's need to be unique. That's what classes are for. Use a class for each button and then use that class to target the correct button (image) to add the event listener to.

const songs = document.querySelectorAll("[data-songs]");
const icons = document.querySelectorAll(".icon");

songs.forEach((song) => {
  // Get the correct icon button...
  var icon = song.parentElement.parentElement.querySelector(".icon");
  
  icon.addEventListener("click", function() {
    console.log(song);
    //put code of icon here
    if (mySong.paused) {
      mySong.play();
      icon.src = "/images/pause.png";
    } else {
      mySong.pause();
      icon.src = "/images/play.png";
    }
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="music-container">
  <div class="music-header">
    <i class="fa fa-angle-left"></i>
    <div class="title">
      <p>My Music</p>
    </div>
    <i class="fa fa-search"> </i>
  </div>
  <div class="music-playlist">
    <div class="music-menu text-center">
      <div class="menu">
        <ul>
          <li><a href="#">Songs</a></li>
          <li><a href="#">Albums</a></li>
          <li><a href="#">Artist</a></li>
          <li><a href="#">Generes</a></li>
        </ul>
      </div>
    </div>
    <div class="music-box">
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="1">
                    <source src="/music/a.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="2">
                    <source src="/music/b.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="3">
                    <source src="/music/c.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="4">
                    <source src="/music/d.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>burzum</h6>
          <audio id="mySong" data-songs="5">
                    <source src="/music/e.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="6">
                    <source src="/music/f.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="7">
                    <source src="/music/g.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="8">
                    <source src="/music/h.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="9">
                    <source src="/music/i.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="10">
                    <source src="/music/j.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="11">
                    <source src="/music/k.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
      <hr />
      <div class="music-info">
        <div class="music-img">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="music-name">
          <h6>Single Song Title</h6>
          <audio id="mySong" data-songs="12">
                    <source src="/music/m.mp3" type="audio/mp3" />
                  </audio>
          <p>Single name and music director</p>
        </div>
        <img src="/images/play.png" class="icon" style="padding-right: 20px" />
      </div>
    </div>
  </div>
  <div class="music-play">
    <div class="play-image">
      <img src="images/Filosofem.jpg" alt="" />
    </div>
    <div class="play-controls">
      <div class="controls">
        <div class="song-name">
          <h5>Dunkelheit</h5>
          <p>Burzum</p>
        </div>
        <div class="play-icon">
          <i class="fa fa-step-backward"> </i>
          <i class="fa fa-play"> </i>
          <i class="fa fa-step-forward"> </i>
        </div>
      </div>
      <div class="music-progress">
        <div class="progress">
          <div class="progress-bar"></div>
        </div>
      </div>
    </div>
  </div>
</div>

now all the buttons are working but all of them continue to play only one song
@aliyass - That's because you're still using the same ID for all of the audio elements. You didn't include all of your code so I did not address that. Since this fixed the issue with your buttons, please click the checkmark to accept the answer. If you need further help with the audio elements, please ask a new question and include all of the relevant code.

Collectives™ on Stack Overflow

my javascript loop triggeres all 12 data-attributes at once

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related