audioとinnerHTMLを一緒にクリックしたコールバックが期待どおりに機能していませんか？

以下のスニペットでは、「再生」をクリックするとmp3が再生され、「再生」が「再生」に変更されます。しかし、私の現在のブラウザ（Mozilla、Safari）では次のように表示されます： "Play"をクリックすると、 "再生中"に変換されますが、ファイルは再生されません。次に、「再生」をクリックしたときにのみファイルが再生されます。なぜ2回クリックしなければならないのですか？ "document.getElementById（ 'player'）という行をコメントアウトするときinnerHTML = '再生';"最初のクリック後すぐにファイルが再生されます。audioとinnerHTMLを一緒にクリックしたコールバックが期待どおりに機能していませんか？

あなたが .innerHTML += "playing"を用い #player .innerHTMLで #textノードを連結または .insertAdjacentHTML

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

を使用することができ

document.getElementById('player').innerHTML = 'playing';

で、<audio>要素を含む、#playerの.innerHTMLを交換する

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

出典

2017-01-22 Andreas

innerHTMLは、テキストだけでなく、要素のすべての内容を置き換えます。あなたはplayingでのdivの内容を交換するとき

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

ですから、<audio src='audioFile.mp3'>を削除：audioタグを作成した後、あなたのHTMLは次のようになります。あなたはこの

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

のようにdiv要素内のテキストを要素を追加し、

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(); 
});

このJavaScriptを使用する必要が

出典

2017-01-22 21:40:51

<!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.insertAdjacentHTML("beforeend", "playing"); 
    audioEl.play(); 
    }); 
</script> 
</body> 
</html>

出典

2017-01-22 21:40:05 guest271314

audioとinnerHTMLを一緒にクリックしたコールバックが期待どおりに機能していませんか？

答えて

関連する問題