javascript - 从新创建的 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>

标签： javascriptaddeventlistenerappendchildcreateelement

Answer 1

您需要在第一个音频结束后获取第二个按钮，并将第二个按钮附加到正文。所以下面的代码应该放在第一个音频"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>