Question

我尝试使用DOM事件focusin / focusout，但我收到错误：Uncaught TypeError：无法读取属性＆＃39; addEventListener＆＃39;为null 在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);    

})();

Answer 1

const input = document.querySelector('input[type=next]');您的类型是错误的。

我想你想要文字。

const input = document.querySelector('input[type=text]');

Answer 2

试试这个：

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

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

我正在使用focusin / focusout而且我得到了：Uncaught TypeError：无法读取属性＆＃39; addEventListener＆＃39;为null

2 个答案: