なぜdocument.getElementById（）はこのように動作しないのですか？

Question

スクリプトコンテンツを前もって入れてもコードがうまくいかないのはなぜですか？しかし、Video Tagの後にスクリプトを追加したとき、それはうまくいった。

var vid = document.getElementById("myVideo"); 

function play(){ 
    vid.play(); 
} 

function pause(){ 
    vid.pause(); 
} 


</script> 




<button onclick="play()">Play</button> 
<button onclick="pause()">Pause</button> 

<video id="myVideo"> 
    <source src="john.mp4" type="video/mp4"> 
</video> 





</html> 

Answer 1

このプラザを説明したスクリプトは、その場所に応じて評価されます。まだレンダリングされていないhtmlにアクセスしようとしています。

これは前に置くことができますが、document readyイベントを使用してください。

Answer 2

クイズブラウザはコードを1行ずつ解釈します。存在しないjavascriptを持つhtmlタグを見つけたい場合は、明らかに見つからず、scriptタグの後ろにビデオタグを置くと、あなたのコードの場合に当てはまります。あなたが本当にhtmlタグの前にあなたのスクリプトを置く場合は、完全なdomがロードされた後にのみjavascriptを実行させることができます。 と同様：

window.onload = function() { 
    //your script here 
}; 

またはjqueryのドキュメントレディ機能を持ちます。 または外部ファイルにスクリプトを置くとして

<script src="yourScript.js" defer></script>