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

i really don't know why is it like so. in my html, if i put my script on head section then i dont get any output on my console and got an error like this :

我真的不知道为什么会这样。在我的HTML中，如果我把我的脚本放在头部分然后我没有在我的控制台上得到任何输出并得到这样的错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

but if i put my script bottom of my body part then its working fine. Html :

但如果我把我的脚本放在身体底部，那么它的工作正常。 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 :

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

}

can anybody tell me what's worng is there? and what is the proper place to put a script ? and what change should i make to run my script from head section ? i will be glad for your answer. thanks in advance

任何人都可以告诉我那里有什么？什么是放脚本的适当位置？我应该从头部运行我的脚本有什么变化？我很高兴你的回答。提前致谢

2 个解决方案

#1

Your script is loading and being executed prior to the rest of the body HTML, so naturally, document.getElementById is going to return null.

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

You should be running your event listener subscription code on or after the document.ready event.

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

Wrap the code you posted into a JS function, then set that function as the callback to be executed on document.ready:

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

document.addEventListener('load', initFn);

document.addEventListener（'load'，initFn）;

#2

If you put your <script> in the <head> javascript loading from top to bottom.
So when loading it returns undefined eventlistener.
So try use the script just before the end of your </body> tag and it will works.
Like so:

如果你把

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

#1