Question

我的代码应该可以工作，但我想我让我弄错了某个地方，我正试图改变警报的声音，它实际上工作但是：如果我正在尝试更改闹钟声音x并且已经添加了警报x + 1，则x的声音将不再改变。

这意味着我的代码只更改了最后一个警报的值，但我不知道为什么。

这是我的HTML和我的JS，我希望你能有答案。

(function(){
  setInterval(function(){
    var temps = new Date();
    var h = temps.getHours();
    var m = temps.getMinutes();
    var s = temps.getSeconds();

    if(h < 10) {
      h = "0" + h;
    }
    if (m < 10) {
      m = "0" + m;
    }
    if (s < 10) {
      s = "0" + s;
    }

    document.getElementById("heure").textContent = h + ":" + m + ":" + s;
  },1000);


  var i = 1;
  document.getElementById("plus").addEventListener('click', function() {
    //Ajout
    var cp = document.getElementById("ligne").cloneNode(true);
    var div = document.createElement("div");
    div.setAttribute("id", "num" + i);
    var liste = document.getElementById("liste");
    liste.appendChild(div);
    liste.appendChild(cp);
    document.querySelector("#liste #num" + i + " + #ligne").hidden = false;

    //Suppression
    var l_sup = document.querySelector("#liste #num" + i + " + #ligne");
    var l2_sup = document.querySelector("#num" + i);
    document.querySelector("#num" + i + " + #ligne #del").addEventListener('click', function() {
      l_sup.parentNode.removeChild(l_sup);
      l2_sup.parentNode.removeChild(l2_sup);
    });

    audio = document.querySelector("#num" + i + " + #ligne #audio");
    select = document.querySelector("#num" + i + " + #ligne #son");
    document.querySelector("#num" + i + " + #ligne #son").addEventListener("click", function(){

      value = select.value;
      audio.setAttribute("src", value);
    });
    i++;
  });
})();

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <head>
  </head>
  <body>
  <p>Il est : <span id = "heure"></span></p>
  <div id = "liste">
    <div hidden id="ligne">
      <input checked type="checkbox" id="cb"/>
      <input type="number" placeholder="Heures" name="h" id="h"/>
      <input type="number" placeholder="Minutes" name="m" id="m"/>
      <input type="text" name="desc" placeholder="Nom de l'alarme" id="desc"/>

      <select id="son"/>
        <option value="Trance.mp3" id="son1">Trance</option>
        <option value="Classic.mp3" id="son2">Classic</option>
        <option value="Dubstep.mp3" id="son3">Dubstep</option>
      </select>
      <audio controls loop id="audio" src = "Trance.mp3"></audio>
      <button id="del">Supprimer</button>
     </div>
  </div>
  <div>
    <button id="plus">Ajouter</button>
  </div>
  <script type="text/javascript" src="script.js"></script>
  </body>
</html>

`

Answer 1

而不是使用click事件来更新audio src。使用change事件。然后音频应该流畅地改变。

  document.querySelector("#num" + i + " + #ligne #son").addEventListener("change", function(){
    value = select.value;
    audio.setAttribute("src", value);
  });

这是一个有效的JSbin https://jsbin.com/ficodot/edit?html,js,output

Answer 2

主要问题出在click的{{1}}监听器内的这段代码中。

<select>

由于value = select.value; audio.setAttribute("src", value);和select变量的值始终为最后添加的元素。因此，它将始终对最后audio元素进行更改。因此，我们需要从<audio> select侦听器中的audio对象获取this和<select>。 click会在this.nextElementSibling事件被触发的<audio>旁边放置<select>：

click

示例工作代码：

＆＃13;

value = this.value;  // for getting value of current select element
this.nextElementSibling.setAttribute("src", value);  // for getting audio element next to current select element

＆＃13;

(function(){
  setInterval(function(){
    var temps = new Date();
    var h = temps.getHours();
    var m = temps.getMinutes();
    var s = temps.getSeconds();

    if(h < 10) {
      h = "0" + h;
    }
    if (m < 10) {
      m = "0" + m;
    }
    if (s < 10) {
      s = "0" + s;
    }

    document.getElementById("heure").textContent = h + ":" + m + ":" + s;
  },1000);


  var i = 1;
  document.getElementById("plus").addEventListener('click', function() {
    //Ajout
    var cp = document.getElementById("num0").cloneNode(true);
    cp.setAttribute("id", "num" + i);
    var liste = document.getElementById("liste");
    liste.appendChild(cp);
    document.querySelector("#liste #num" + i).hidden = false;

    //Suppression
    var l_sup = document.querySelector("#liste #num" + i);
    var l2_sup = document.querySelector("#num" + i);
    document.querySelector("#num" + i + " button").addEventListener('click', function() {
      l_sup.parentNode.removeChild(l_sup);
      l2_sup.parentNode.removeChild(l2_sup);
    });

    audio = document.querySelector("#num" + i + " audio");
    select = document.querySelector("#num" + i + " select");
    document.querySelector("#num" + i + " select").addEventListener("click", function(){

      value = this.value;
      this.nextElementSibling.setAttribute("src", value);
    });
    i++;
  });
})();

＆＃13;

P.S。：正如Brahma Dev评论的那样， id 应始终唯一

报警javascript，改变声音

2 个答案: