エラーのJSイベントは、「ヌルの 『onclickの』プロパティを設定できません」
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
var btn1 = document.getElementById('btn1');
var demo1 = document.getElementById('demo1');
// onclick事件
btn1.onclick = function () {
demo1.innerHTML = 'hello world!';
}
</script>
</head>
<body>
<button id="btn1">点我</button>
<p id="demo1"></p>
</body>
</html>
次のように上記のコードの実装は、エラーが報告されます。
jsのコードは、負荷の下を置く後、それが正常に実行することができます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
</head>
<body>
<button id="btn1">点我</button>
<p id="demo1"></p>
<script>
var btn1 = document.getElementById('btn1');
var demo1 = document.getElementById('demo1');
// onclick事件
btn1.onclick = function () {
demo1.innerHTML = 'hello world!';
}
</script>
</body>
</html>
理由の分析：
上記に示すようなonclickのまたはイベントONMOUSEOVER結合したかのようにヘッドとの間に配置されたJSコードやJSファイルは、エラーコンソールと同様に報告されます。ブラウザがロードHTML文書の順番は上から下にあるので、実行する前に、完全なロードボタンノードjsのコード。ブラウザは、トップダウンを解析し、ノードは、エラー、その後、結合onclickのボタンを見つけることができません。
ソリューション：
- JS JSコードまたは外部ファイルには、一番下にロードされています
- 使用window.onload =関数（）{}パッケージの内容のJS
