Question

在导航栏中有一个简单的联系人链接，用于侦听单击，在id为'hello'的表单输入上触发一个focus（）函数。得到错误：

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-y的习语：

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

修改
更详细地说，底层问题是Javascript在页面完全呈现之前运行，因此ID为“hello”的项目尚不存在。

我的更改

我安排了只在jQuery准备好后运行的函数;这就是$(fcn)表达式的含义。在我看来，这比使用$(document).ready()要好 - 准备好的文件并不是一个广为人知的概念。关键是 jQuery （“$”）准备就绪。

我使用$("#hello")代替document.getElementById('hello')，它们大致相同，但前者是jQuery的方法。

出于同样的原因，我使用.click(f)代替.addEventListener('click',f)

Answer 2

尝试将jQuery包装在$(document).ready()中像这样：

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

等待页面和CSS在执行脚本之前完成加载。

无法使简单的focus（）函数正常工作

2 个答案: