Estoy tratando de crear un nuevo div cuando finaliza el audio. Funciona bien por primera vez: el nuevo div aparece tal como quiero. Pero no funciona desde el div recién creado: el audio no se reproduce, el nuevo div no aparece.
¿Qué estoy haciendo mal? -_-
var button = document.getElementById("button-1"); var audio = document.getElementById("audio-1"); var audio2 = document.getElementById("audio-2"); var div = document.createElement('div'); var div2 = document.createElement('div'); var body = document.body; button.addEventListener("click", function() { audio.play(); }); audio.addEventListener("ended", (event) => { div.innerHTML = "<h1>First div</h1><button type='button' id='button-2'>Play Audio 2</button>"; div.classList.add('fullscreen'); body.appendChild(div); }); var button2 = document.getElementById("button-2"); button2.addEventListener("click", function() { audio2.play(); }); audio2.addEventListener("ended", (event) => { div2.innerHTML = "<h1>Second div</h1><button id='button-3'>Play Audio 3</button>"; div2.classList.add('fullscreen'); body.appendChild(div2); }); body { padding: 0; margin: 0; width: 100vw; height: 100vh; display: flex; align-items: center; flex-direction: column; } .fullscreen { width: 100%; height: 100%; background: darkcyan; color: white; display: flex; align-items: center; flex-direction: column; position: absolute; <h1>Empty body</h1> <button type="button" id="button-1">Play Audio</button> <audio id="audio-1"> <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/> </audio> <audio id="audio-2"> <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/> </audio>Necesita obtener el segundo botón después de que finalice el primer audio y el segundo botón se agregue al cuerpo. Por lo tanto, el siguiente código debe colocarse dentro del primer evento de audio "ended" .
var button2 = document.getElementById("button-2"); button2.addEventListener("click", function() { audio2.play(); }Aquí está el resultado:
var button = document.getElementById("button-1"); var audio = document.getElementById("audio-1"); var audio2 = document.getElementById("audio-2"); var div = document.createElement('div'); var div2 = document.createElement('div'); var body = document.body; button.addEventListener("click", function() { audio.play(); }); audio.addEventListener("ended", (event) => { div.innerHTML = "<h1>First div</h1><button type='button' id='button-2'>Play Audio 2</button>"; div.classList.add('fullscreen'); body.appendChild(div); var button2 = document.getElementById("button-2"); button2.addEventListener("click", function() { audio2.play(); }); }); audio2.addEventListener("ended", (event) => { div2.innerHTML = "<h1>Second div</h1><button id='button-3'>Play Audio 3</button>"; div2.classList.add('fullscreen'); body.appendChild(div2); }); body { padding: 0; margin: 0; width: 100vw; height: 100vh; display: flex; align-items: center; flex-direction: column; } .fullscreen { width: 100%; height: 100%; background: darkcyan; color: white; display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; <h1>Empty body</h1> <button type="button" id="button-1">Play Audio</button> <audio id="audio-1"> <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/> </audio> <audio id="audio-2"> <source src='https://dl.dropboxusercontent.com/s/q6b67dau1g01z3h/click_button_short.mp3' type='audio/mpeg'/> </audio>