个人中心
gpt4 book ai didi

javascript - 如果将 addEventListener 放在 head 部分而不是 body 中，则 addEventListener 不起作用

转载 作者：行者123 更新时间：2023-11-28 00:50:44 28 4
gpt4 key购买 nike

我真的不知道为什么这不起作用。在我的 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/

28 4 0
文章推荐： html - CSS 过渡闪烁
文章推荐： javascript - 如何为 Angular Bootstrap 绑定(bind) bs-datepicker 指令的选择事件？
文章推荐： javascript - 在指令模板内的 ng-repeat 中编译有条件插入的 html
文章推荐： javascript - 在 Controller 之间共享范围变量的最佳实践是什么？