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

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

从新创建的 div 创建一个新的 div

Create a new div from the freshly created div

javascript

addeventlistener

appendchild

createelement