Question

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

有人可以告诉我我做错了什么以及放置脚本标签的适当位置在哪里？另外，我应该从头部运行我的脚本进行哪些更改？我很乐意回答你。提前致谢

Answer 1

您的脚本正在加载并在正文HTML的其余部分之前执行，因此document.getElementById自然会返回null。

您应该在document.ready事件之后或之后运行事件侦听器订阅代码。

将您发布的代码包装到JS函数中，然后将该函数设置为要在document.ready上执行的回调：

document.addEventListener('load', initFn);

Answer 2

ec2-00-00-00-00.myowndomain.com

添加关键字推迟，脚本将在所有DOM元素加载后运行

Answer 3

如果您将<script>放在<head> javascript加载中从上到下。
因此加载时返回undefined eventlistener。
因此，请尝试在</body>标记结束前使用该脚本，它会起作用像这样：

<script type="text/javascript" src="script.js"> </script>
</body>

Answer 4

进一步了解Josh E的答案：

您应该在document.ready事件上或之后运行事件侦听器订阅代码

如果要在元素可用时立即执行代码，则可以使用requestAnimationFrame在页面加载期间扫描DOM，而不必等待整个页面加载：

function doSomethingWithElement(myElement) {
    myElement.addEventListener('click', function() {
        // Do stuff here
    });
}

function searchForElement() {
    const el = document.getElementById('img1');
    if (el) {
       return doSomethingWithEl(el); 
    }
    window.searchID = window.requestAnimationFrame(searchForElement);
}

// Store the request ID so it can be cancelled later
// Otherwise it'll run forever!
window.searchID = window.requestAnimationFrame(searchForElement);
window.addEventListener('load', function() {
    window.cancelAnimationFrame(window.searchID);
});

这可能是多余的，但是当您想尽快操作或向DOM元素添加侦听器时，它非常有用。

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

4 个答案: