My code should work but i guess i made i mistake somewhere, i'm trying to change the sound of an alarm, it's actually working but : If i'm trying to change the sound of the alarm x and an alarm x+1 has already been add, the sound of x won't change anymore.
It means my code only change the value of the last alarm but i don't know why.
Here is my HTML and my JS, i hope you'll have an 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="http://ift.tt/2apRjw3" 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>
`
Aucun commentaire:
Enregistrer un commentaire