Javascript 无法使simple 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);

Uncaught TypeError:无法读取null的属性'addEventListener'
实习1.js:18






全名：



信息：



提交
函数contactFocus（）{
$（“#全名”）.focus（）；
}
var contactLink=document.getElementById（'hello'）；
contactLink.addEventListener（'click'，contactFocus，false）；

这可能是一个计时问题：行在页面完全执行之前运行

用一种更为jQuery-y的习惯用法试试这个：

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

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

我的变化是

• 我安排只在jQuery就绪后运行函数；这就是

  $（fcn）

  表达式的含义。在我看来，这优于使用

  $（document）.ready（）

  ——准备好的文档并不是一个被广泛理解的概念。关键是jQuery（$）已经准备好了
• 我使用了

  $（“#hello”）

  而不是

  document.getElementById（'hello'）

  ，它们大致相当，但前者是jQuery的实现方式
• 出于同样的原因，我使用了

  。单击（f）

  而不是

  。addEventListener（'click'，f）

---

尝试将jQuery包装在

$（document.ready（）

像这样：

---

这将等待页面和CSS完成加载，然后再执行脚本。

有时错误会准确地告诉您问题所在。您正在运行的脚本在页面上与标记相关的具体位置？感谢您的帮助！不知道为什么。您能解释一下吗？在定义标记之前，您的脚本很可能位于标题中。在dom运行时，您试图查找的元素将不存在于dom中。这就是为什么它使用文档就绪，这会延迟执行，直到使用所有标记数据解析dom。或者，如果你在开始之前就加入了你的脚本，你根本不需要做这个改变。和另一个答案一样，只是没有箭头功能。是的，但它的目的更明确，更好地实践它。这是一种观点，我不同意更好的实践概念$（（）=>{}）、$（函数）和$（文档）.ready（函数）都执行相同的逻辑。如果您是jQuery新手，最好进行实践。啊，刚刚找到评论。不过，我认为这是编码实践的方式。（函数）学习起来不是很混乱，在jQuery freenode irc中显示新人时经常使用。

$(document).ready(function(){
    $('#fullName').focus();
});