gpt4 book ai didi

javascript - 为什么我出现 Cannot read property 'addEventListener' of null 错误?

转载 作者:行者123 更新时间:2023-12-02 21:46:13 28 4
gpt4 key购买 nike

HTML:

 <body>
<script src="dynamic.js"></script>
<nav>
<label id="logo">My Life</label>
<ul id="test">
<li>
<a href="#" id="change">Home</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Feedback</a>
</li>
<li>
<a href="#" class="active">Log in</a>
</li>
</ul>
</nav>

JavaScript:

const change = document.getElementById("change");
change.addEventListener("mouseover", () => changeFont());
change.addEventListener("mouseout", () => normalFont());

function changeFont() {
change.style.fontSize = "25px";
}

function normalFont() {
change.style.fontSize = "15px";
}

我有简单的导航栏,当我决定通过悬停效果使其更有趣时,我决定使用 JS 而不是 CSS,当我在 chrome 中运行代码时,出现“无法读取 null 属性‘addEventListener’”错误我不明白为什么?

我需要一些帮助......

最佳答案

因为<script>在文件的开头。所以当它执行元素change时未加载,因此变量为 null 。将脚本放在文档末尾或设置属性 defer 。具有此属性的脚本会等待 DOM 加载,然后执行。

关于javascript - 为什么我出现 Cannot read property 'addEventListener' of null 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60241957/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com