javascript - 无法让简单的 focus() 函数工作

Question

在导航栏中有一个简单的联系链接，用于监听点击，触发一个函数，该函数将 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);

Answer 1

这可能是一个时序问题:该行在页面完全执行之前运行。

试试这个，用更 jQuery 风格的方式:

$(() => {
  $("#hello").click(contactFocus);
});

编辑:
更详细地说，根本问题是 Javascript 在页面完全呈现之前运行，因此 id 为“hello”的项目尚不存在。

我的改变是

• 我安排该函数仅在 jQuery 准备就绪后运行；这就是 $(fcn) 表达式的含义。在我看来，这优于使用 $(document).ready() ——文档准备就绪并不是一个被广泛理解的概念。重点是 jQuery ("$") 已经准备好了。
• 我使用了 $("#hello") 而不是 document.getElementById('hello')，它们大致等效，但前者是 jQuery 的方式去做吧。
• 出于同样的原因，我使用 .click(f) 而不是 .addEventListener('click',f)