Javascript 我正在使用focusin/focusout，得到：uncaughttypeerror:无法读取null的属性'addEventListener'

我试图使用DOM events focusin/focusout，但得到的错误是：uncaughttypeerror:无法读取null的属性'addEventListener' 在main.js:18 在main.js:40

我正在使用Chrome作为我的浏览器，以防有帮助。谢谢

(function() {

    const body = document.body;
    const input = document.querySelector('input[type=next]');
    const overlay = document.querySelector('.overlay');

    function showFloater() {
        body.classList.add('show-floater');
    }


    function closeFloater() {
        if (body.classList.contains('show-floater')) {
        body.classList.remove('show-floater');
        }
    }

    input.addEventListener('focus', showFloater);
    input.addEventListener('blur', closeFloater);
    overlay.addEventListener('click', closeFloater);    

    // ======= for Showing bookmarks

    const bookmarksList = document.querySelector('.bookmarks-list');
    const bookmarkForm = document.querySelector('.bookmark-form');
    const bookmarkInput = bookmarkForm.querySelector('input[type=text]');

    function createBookmark(e) {
    e.preventDefault();

    console.log('processing the form');
    }    

    bookmarkForm.addEventListener('submit', createBookmark);    

})();

试试这个：

if (input !== null) {
    input.addEventListener('focus', showFloater);
} else {
    console.log('input not found');
}

始终检查您是否已使用选择器成功标识元素。

const input=document.querySelector'input[type=next]；你的类型不对

我猜你想发短信

---

const input=document.querySelector'input[type=text]

脚本是否在尝试引用的元素之后？需要这样做。这样可以避免错误，但这无助于让事件处理程序工作……如果像这样为null，则无声跳过可能更糟糕。一方面，它将避免错误，但另一方面，它将避免错误。一个简单的document.querySelector页面加载在正确的位置时，yada yada应始终工作；如果没有，我希望立即出现错误，因为确实出了问题。好的，我编辑了我的答案，为了解决这个问题，我们需要查看将此函数与事件关联的代码。实际上，这个输入错误是所有问题的根源。我不知道我写了“下一个”。对不起，这还是个新消息。谢谢。实际上是这种类型，不是这种打字错误。你应该小心。