1
私は本当にそのような理由が分かりません。私は、ヘッド部の上に私のスクリプトを置けば、私のhtmlで、その後、私は私のコンソール上の任意の出力を得るいけないし、このようなエラーを得た：addEventListenerは、頭の部分ではなく本体の部分に入れても機能しません。
Uncaught TypeError: Cannot read property 'addEventListener' of null
が、私は私の体の部分の私のスクリプト底を置けば、その罰金作業します。 HTML：
enter code here
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"> </script>
</head>
<body>
<ul>
<li > <a href="#" data-img="img1" id="img1"> Shahin </a> </li>
<li > <a href="#" data-img="img2" id="img2"> Lina </a> </li>
<li > <a href="#" data-img="img3" id="img3"> Adrita </a> </li>
</ul>
<img src="./img/1.jpg" class="hidden">
<img src="./img/2.png" class="hidden">
<img src="./img/3.jpg" class="hidden">
</body>
のjavascript：
var shahin = document.getElementById('img1');
var lina = document.getElementById('img2');
var adrita = document.getElementById("img3");
shahin.addEventListener('click',picShow);
lina.addEventListener('click',picShow);
adrita.addEventListener('click',picShow);
function picShow() {
console.log(this);
}
誰でも私に何があるのか教えていただけますか？スクリプトを置くための適切な場所は何ですか？私のスクリプトを頭の部分から実行するにはどのような変更が必要ですか？私はあなたの答えにうれしいでしょう。ありがとうございます。
DOMを使用すると、要素をつかむとリスナーを添付できるようにするためにロードする必要があります。あなたのコードが頭にある場合、スクリプトが実行される前にDOMはロードされていません。あなたのコードを 'onload'またはレディーラッパーにラップするか、HTMLの下にコードを移動してください。 – Andy
あなたの体がまだ存在しないため頭にあるなら' $（document）.ready（） 'に入れてくださいまだレンダリングされていない場合は、 – jdubjdub
@jdubjdubというハンドラを追加するとjQueryでのみ動作します。 – Andy