在导航栏中有一个简单的联系链接,用于监听点击,触发一个函数,该函数将 focus() 放在 ID 为“hello”的表单输入上。出现错误:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at practice1.js:18
<nav>
<ul>
<li><a href="#home"><span class="active">Home</span></a></li>
<li><a href="#about">About</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#contact" id="hello">Contact</a></li>
</ul>
</nav>
<form>
Full name:<br>
<input type="text" name="fullname" id="fullName"><br>
Message:<br>
<textarea type="text" name="message" id="sidebar-message"></textarea><br>
<button type="submit" name="message-submit" class="submit-button" href="#">Submit</button>
</form>
function contactFocus() {
$('#fullName').focus();
}
var contactLink = document.getElementById('hello');
contactLink.addEventListener('click', contactFocus, false);
最佳答案
这可能是一个时序问题:该行在页面完全执行之前运行。
试试这个,用更 jQuery 风格的方式:
$(() => {
$("#hello").click(contactFocus);
});
编辑:
更详细地说,根本问题是 Javascript 在页面完全呈现之前运行,因此 id 为“hello”的项目尚不存在。
我的改变是
- 我安排该函数仅在 jQuery 准备就绪后运行;这就是
$(fcn)
表达式的含义。在我看来,这优于使用$(document).ready()
——文档准备就绪并不是一个被广泛理解的概念。重点是 jQuery ("$") 已经准备好了。 - 我使用了
$("#hello")
而不是document.getElementById('hello')
,它们大致等效,但前者是 jQuery 的方式去做吧。 - 出于同样的原因,我使用
.click(f)
而不是.addEventListener('click',f)
关于javascript - 无法让简单的 focus() 函数工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45765090/