報警JavaScript，更改聲音

我的代碼應該可以工作，但我想我讓我在某處錯誤，我試圖改變報警聲音，它實際上工作，但：如果我試圖改變聲音警報x和警報x + 1已經被添加，x的聲音將不再改變。報警JavaScript，更改聲音

這意味着我的代碼只會改變最後一次報警的值，但我不知道爲什麼。

這是我的HTML和JS我，我希望你有一個answer.`

(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>

來源

2017-09-21 Mathieu Chorier

對於初學者，請確保您沒有兩個具有相同ID的元素。 –

主要的問題是在這片裏面的代碼click聽者的<select>。

value = select.value; 
audio.setAttribute("src", value);

作爲select和audio變量將始終具有最後添加元素的值。所以它總是會修改最後的<audio>元素。因此，我們需要從<select>click偵聽器中的this對象獲取select和audio。 this.nextElementSibling會給我們<audio>放在旁邊<select>在其上click事件被觸發：

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

樣的工作代碼：

(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++; 
 
    }); 
 
})();

<!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="num0"> 
 
     <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/> 
 
     <option value="Trance.mp3">Trance</option> 
 
     <option value="Classic.mp3">Classic</option> 
 
     <option value="Dubstep.mp3">Dubstep</option> 
 
     </select> 
 
     <audio controls loop src = "Trance.mp3"></audio> 
 
     <button>Supprimer</button> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <button id="plus">Ajouter</button> 
 
    </div> 
 
    <script type="text/javascript" src="script.js"></script> 
 
    </body> 
 
</html>

PS：梵開發評論，ID應始終爲唯一

來源

2017-09-22 08:29:22

非常感謝，它非常完美！ –

而不是使用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

來源

2017-09-21 10:55:36 azs06

報警JavaScript，更改聲音

回答

相關問題