如果将其放在头部而不是主体中，则AddeventListener无法正常工作

我真的不知道为什么这不起作用。在我的html中，如果我将脚本放在头部部分，我会在控制台中获得以下错误：

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);
}

有人能告诉我我在做什么错，放置脚本标签的适当位置在哪里？另外，我应该做些更改以从头部部分运行我的脚本？我会为您的回答感到高兴。预先感谢

您的脚本正在加载并在身体其余部分之前执行，因此自然而然地，document.getElementById将返回null。

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

将您发布的代码包装到JS函数中，然后将该函数设置为要在Document.Document.Docorm.Decor.dector.：

上执行的回调。

document.addEventListener('load', initFn);

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

添加关键字 defer ，脚本在所有DOM元素都将加载

时运行

如果将<script>放在<head> JavaScript从上到下加载。
因此，加载时，它会返回未定义的EventListener。
因此，在</body>标签结束之前尝试使用脚本，并且可以使用。
喜欢：

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

进一步到乔什·答案：

您应该在文档上或之后运行事件侦听器订阅代码

如果要在元素可用后立即执行代码，则可以使用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);
});

这可能是过大的杀伤力

相关内容

最新更新

热门标签：