javascript - 我正在使用 focusin/focusout 并且得到 : Uncaught TypeError: Cannot read property 'addEventListener' of null

Question

我正在尝试使用 DOM 事件 focusin/focusout 但收到错误:未捕获类型错误:无法读取 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);    

})();

Answer 1

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

我猜你想要短信。

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