Fatal编程技术网
  • javascript/
  • Javascript 单击callback，音频和innerHTML一起无法正常工作？

Javascript 单击callback，音频和innerHTML一起无法正常工作？

javascript audio

Javascript 单击callback，音频和innerHTML一起无法正常工作？,javascript,audio,callback,innerhtml,Javascript,Audio,Callback,Innerhtml,在下面的代码片段中，预期的行为是单击“播放”，然后播放mp3，“播放”变为“播放”。然而，在我当前的浏览器（Mozilla、Safari）中，我得到了以下结果：当单击“播放”时，它会转换为“播放”，但没有播放任何文件。然后，只有在单击“播放”时才能播放文件。为什么我必须点击两次？在注释掉“document.getElementById（'player'）.innerHTML='playing'；”行时，第一次单击后文件立即播放 <!doctype html> <html>

在下面的代码片段中，预期的行为是单击“播放”，然后播放mp3，“播放”变为“播放”。然而，在我当前的浏览器（Mozilla、Safari）中，我得到了以下结果：当单击“播放”时，它会转换为“播放”，但没有播放任何文件。然后，只有在单击“播放”时才能播放文件。为什么我必须点击两次？在注释掉“document.getElementById（'player'）.innerHTML='playing'；”行时，第一次单击后文件立即播放

<!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>


玩
audioEl=document.createElement（“音频”）；
setAttribute（'src'，'audioFile.mp3'）；
document.getElementById（'player'）.appendChild（audioEl）；
document.getElementById（'player'）。addEventListener（'click'，function（）{
document.getElementById（'player'）.innerHTML='playing'；
audioEl.play（）；
});
您正在替换
#player
的
.innerHTML
，包括
元素，位于

document.getElementById('player').innerHTML = 'playing';
您可以使用
.innerHTML+=“playing”
或使用
.insertAdjacentHTML
在
\player
.innerHTML连接
\text
节点

<!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() {
   this.innerHTML += 'playing';
   audioEl.play();
  });
</script>
</body>
</html>


玩
audioEl=document.createElement（“音频”）；
setAttribute（'src'，'audioFile.mp3'）；
document.getElementById（'player'）.appendChild（audioEl）；
document.getElementById（'player'）。addEventListener（'click'，function（）{
this.innerHTML+=“播放”；
audioEl.play（）；
});



玩
audioEl=document.createElement（“音频”）；
setAttribute（'src'，'audioFile.mp3'）；
document.getElementById（'player'）.appendChild（audioEl）；
document.getElementById（'player'）。addEventListener（'click'，function（）{
这个.insertAdjacentHTML（“beforeed”，“playing”）；
audioEl.play（）；
});
您正在替换
#player
的
.innerHTML
，包括
元素，位于

document.getElementById('player').innerHTML = 'playing';
您可以使用
.innerHTML+=“playing”
或使用
.insertAdjacentHTML
在
\player
.innerHTML连接
\text
节点

<!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() {
   this.innerHTML += 'playing';
   audioEl.play();
  });
</script>
</body>
</html>


玩
audioEl=document.createElement（“音频”）；
setAttribute（'src'，'audioFile.mp3'）；
document.getElementById（'player'）.appendChild（audioEl）；
document.getElementById（'player'）。addEventListener（'click'，function（）{
this.innerHTML+=“播放”；
audioEl.play（）；
});



玩
audioEl=document.createElement（“音频”）；
setAttribute（'src'，'audioFile.mp3'）；
document.getElementById（'player'）.appendChild（audioEl）；
document.getElementById（'player'）。addEventListener（'click'，function（）{
这个.insertAdjacentHTML（“beforeed”，“playing”）；
audioEl.play（）；
});

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

<!doctype html>
<html>
<body>
    <div id="player">Play
        <audio src='audioFile.mp3'>
    </div>
</body>
</html>
然后使用这个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
替换元素的所有内容，而不仅仅是文本。创建
audio
标记后，您的HTML如下所示：

<!doctype html>
<html>
<body>
    <div id="player">Play
        <audio src='audioFile.mp3'>
    </div>
</body>
</html>
然后使用这个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();
});