从新创建的div创建新的div

Question

当音频结束时，我正在尝试创建一个新的div。它第一次工作得很好:新的div就像我想要的那样出现。但是它不能在新创建的div中工作:音频不能播放，新的div也不会出现。

我做错了什么？-_-

​

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>

​

Answer 1

你需要在第一个音频结束后获取第二个按钮，第二个按钮被附加到body。因此，下面的代码应该放在第一个音频"ended"事件中。

var button2 = document.getElementById("button-2");
button2.addEventListener("click", function() {
  audio2.play();
}

结果如下：

​

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>

​