Question

在下面的代码片段中，预期的行为是点击＆＃34;播放＆＃34;然后播放mp3并播放＆＃34;播放＆＃34;变为＆＃34;玩＆＃34;。但是在我目前的浏览器（Mozilla，Safari）中，我得到以下内容：点击＆＃34; Play＆＃34;它变成了＃34;玩＆＃34;但是没有播放文件。然后，只有在点击＆＃34;播放＆＃34;该文件被播放。为什么我要点击两次？在评论该行＆＃34; document.getElementById（＆＃39; player＆＃39;）时，innerHTML =＆＃39;播放＆＃39 ;;＆＃34;第一次点击后立即播放该文件。

<!doctype html>
<html>
<body>
 <div id="player">Play</div>
 <script>
  audioEl = document.createElement("audio");
  audioEl.setAttribute('src','audioFile.mp3');
  document.getElementById('player').appendChild(audioEl);

  document.getElementById('player').addEventListener('click',function() {
   document.getElementById('player').innerHTML = 'playing';
   audioEl.play();
  });
</script>
</body>
</html>

Answer 1

您正在替换<{1}}的{{1}}，包括.innerHTML元素，

#player

您可以使用<audio>在document.getElementById('player').innerHTML = 'playing'; #text连接#player节点，或使用.innerHTML

.innerHTML += "playing"

.insertAdjacentHTML

Answer 2

innerHTML替换元素的所有内容，而不仅仅是文本。创建audio标记后，您的HTML如下所示：

<!doctype html>
<html>
<body>
    <div id="player">Play
        <audio src='audioFile.mp3'>
    </div>
</body>
</html>

因此，当您使用playing替换div的内容时，请删除<audio src='audioFile.mp3'>。

您必须在div中添加文本元素，如此

<div id="player">
    <div id="player-text"></div>
</div>

并使用此javascript

audioEl = document.createElement("audio");
audioEl.setAttribute('src','audioFile.mp3');
document.getElementById('player').appendChild(audioEl);

document.getElementById('player').addEventListener('click',function() {
    document.getElementById('player-text').innerHTML = 'playing';
    audioEl.play();
});

点击回调音频和innerHTML一起不按预期工作？

2 个答案: