Блог

поэтому я пытался создать программу для воспроизведения музыки, и я пытался заставить ее запускать каждую песню независимо(точно так же, как это делают все музыкальные проигрыватели), но мой сценарий, похоже, работает только тогда, когда у меня в html только одна песня, поэтому, когда я добавил 12 песен и заказал их с атрибутом данных, а затем попытался нажать кнопку, ничего не произошло, а затем я попытался использовать консоль.войдите в систему, чтобы проверить, что произошло, и, по-видимому, все 12 песен сработали сразу, вот мой javascript

 const songs = document.querySelectorAll("[data-songs]");  const icons = document.querySelector("#icon");   songs.forEach((song) =gt; {  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";  }  });  });  

и вот мой html

 lt;!DOCTYPE htmlgt;  lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8" /gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /gt;  lt;link rel="stylesheet" href="/css/styles.css" /gt;  lt;link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"  /gt;  lt;link  rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"  /gt;  lt;titlegt;Music Applt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;div class="music-container"gt;  lt;div class="music-header"gt;  lt;i class="fa fa-angle-left"gt;lt;/igt;  lt;div class="title"gt;  lt;pgt;My Musiclt;/pgt;  lt;/divgt;  lt;i class="fa fa-search"gt; lt;/igt;  lt;/divgt;  lt;div class="music-playlist"gt;  lt;div class="music-menu text-center"gt;  lt;div class="menu"gt;  lt;ulgt;  lt;ligt;lt;a href="#"gt;Songslt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Albumslt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Artistlt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Genereslt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;div class="music-box"gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="1"gt;  lt;source src="/music/a.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="2"gt;  lt;source src="/music/b.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="3"gt;  lt;source src="/music/c.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="4"gt;  lt;source src="/music/d.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;burzumlt;/h6gt;  lt;audio id="mySong" data-songs="5"gt;  lt;source src="/music/e.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="6"gt;  lt;source src="/music/f.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="7"gt;  lt;source src="/music/g.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="8"gt;  lt;source src="/music/h.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="9"gt;  lt;source src="/music/i.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="10"gt;  lt;source src="/music/j.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="11"gt;  lt;source src="/music/k.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="12"gt;  lt;source src="/music/m.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" id="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="music-play"gt;  lt;div class="play-image"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="play-controls"gt;  lt;div class="controls"gt;  lt;div class="song-name"gt;  lt;h5gt;Dunkelheitlt;/h5gt;  lt;pgt;Burzumlt;/pgt;  lt;/divgt;  lt;div class="play-icon"gt;  lt;i class="fa fa-step-backward"gt; lt;/igt;  lt;i class="fa fa-play"gt; lt;/igt;  lt;i class="fa fa-step-forward"gt; lt;/igt;  lt;/divgt;  lt;/divgt;  lt;div class="music-progress"gt;  lt;div class="progress"gt;  lt;div class="progress-bar"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;script src="/Script/jquery-3.6.0.min.js"gt;lt;/scriptgt;  lt;script src="/Script/script.js"gt;lt;/scriptgt;  lt;/bodygt;  lt;/htmlgt;  ```  

У вас не может быть дубликатов идентификаторов, все идентификаторы должны быть уникальными. Вот для чего нужны занятия. Используйте класс для каждой кнопки, а затем используйте этот класс, чтобы выбрать правильную кнопку (изображение) для добавления прослушивателя событий.

 const songs = document.querySelectorAll("[data-songs]"); const icons = document.querySelectorAll(".icon");  songs.forEach((song) =gt; {  // 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";  }  }); }); 

 lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" /gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /gt;  lt;div class="music-container"gt;  lt;div class="music-header"gt;  lt;i class="fa fa-angle-left"gt;lt;/igt;  lt;div class="title"gt;  lt;pgt;My Musiclt;/pgt;  lt;/divgt;  lt;i class="fa fa-search"gt; lt;/igt;  lt;/divgt;  lt;div class="music-playlist"gt;  lt;div class="music-menu text-center"gt;  lt;div class="menu"gt;  lt;ulgt;  lt;ligt;lt;a href="#"gt;Songslt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Albumslt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Artistlt;/agt;lt;/ligt;  lt;ligt;lt;a href="#"gt;Genereslt;/agt;lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;div class="music-box"gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="1"gt;  lt;source src="/music/a.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="2"gt;  lt;source src="/music/b.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="3"gt;  lt;source src="/music/c.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="4"gt;  lt;source src="/music/d.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;burzumlt;/h6gt;  lt;audio id="mySong" data-songs="5"gt;  lt;source src="/music/e.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="6"gt;  lt;source src="/music/f.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="7"gt;  lt;source src="/music/g.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="8"gt;  lt;source src="/music/h.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="9"gt;  lt;source src="/music/i.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="10"gt;  lt;source src="/music/j.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="11"gt;  lt;source src="/music/k.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;hr /gt;  lt;div class="music-info"gt;  lt;div class="music-img"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="music-name"gt;  lt;h6gt;Single Song Titlelt;/h6gt;  lt;audio id="mySong" data-songs="12"gt;  lt;source src="/music/m.mp3" type="audio/mp3" /gt;  lt;/audiogt;  lt;pgt;Single name and music directorlt;/pgt;  lt;/divgt;  lt;img src="/images/play.png" class="icon" style="padding-right: 20px" /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="music-play"gt;  lt;div class="play-image"gt;  lt;img src="images/Filosofem.jpg" alt="" /gt;  lt;/divgt;  lt;div class="play-controls"gt;  lt;div class="controls"gt;  lt;div class="song-name"gt;  lt;h5gt;Dunkelheitlt;/h5gt;  lt;pgt;Burzumlt;/pgt;  lt;/divgt;  lt;div class="play-icon"gt;  lt;i class="fa fa-step-backward"gt; lt;/igt;  lt;i class="fa fa-play"gt; lt;/igt;  lt;i class="fa fa-step-forward"gt; lt;/igt;  lt;/divgt;  lt;/divgt;  lt;div class="music-progress"gt;  lt;div class="progress"gt;  lt;div class="progress-bar"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;