我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误:
Uncaught TypeError: Cannot read property 'addEventListener' of null
如果我将脚本放在正文的底部，它就可以正常工作。
HTML :
<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);
}
谁能告诉我我做错了什么以及放置脚本标签的正确位置在哪里？另外，我应该做些什么改变才能从 head 部分运行我的脚本？我会很高兴你的回答。提前致谢
最佳答案
您的脚本在正文 HTML 的其余部分之前加载和执行，因此 document.getElementById 自然会返回 null。
您应该在 document.ready 事件发生时或之后运行事件监听器订阅代码。
将您发布的代码包装到一个 JS 函数中，然后将该函数设置为要在 document.ready 上执行的回调:
document.addEventListener('load', initFn);
关于javascript - 如果将 addEventListener 放在 head 部分而不是 body 中，则 addEventListener 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47581540/