无法读取属性'addEventListener'的null错误，不知道为什么 [英] Cannot read property 'addEventListener' of null Error, not sure why

问题描述

每当我将鼠标悬停在图像上时，它都不会放大并出现错误。

Whenever I hover over the image it does not enlarge and gives an error.

HTML和Javascript代码（这是两个单独的文件）：

HTML and Javascript code(these are two separate files):

var banner = document.getElementById("banner");

function enlargePic(){
banner.style.width = '800px';
banner.style.height  = '300px';
}

function normalPic(){
banner.style.width = '500px';
banner.style.height  = '200px';
}


banner.addEventListener("mouseover", enlargePic, false); 

banner.addEventListener("mouseout", normalPic, false); 

<div id="designs">
<a id="designs"></a>
<h1>DESIGNS.</h1> 
<table>
<tr>
<td><img src="banner2.jpg" id="banner"></td>
</tr>
</table>
</div>

推荐答案

您的javascript代码在第一部分。所以它在banner元素之前渲染，并且找不到元素id = banner，因为它还没有渲染。尝试在html代码之前找到代码。

Your javascript code is in your first section. So it has rendered before banner element and cannot find the element id = banner because it has not rendered yet. Try to locate the code before the html code.

这篇关于无法读取属性'addEventListener'的null错误，不知道为什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！