eventlistener 无法访问函数外的变量

Question

提交事件侦听器将读取的元素附加到另一个 div 容器元素。 但是在尝试将读取元素附加到函数外部的另一个事件侦听器时，我无法访问它。 知道如何解决这个问题吗？

function add() {
    read = document.createElement('div');
    read.textContent = 'Read';
    read.classList.add('read');
    card.appendChild(read);
}

submit.addEventListener('click', add);
read.addEventListener("click", () => {
        read.classList.toggle('unread');
    });

Answer 1

您的代码并不正确。 我会建议：

let read = null;
function add() {
   if (read) return;

    read = document.createElement('div');
    read.textContent = 'Read';
    read.classList.add('read');
    card.appendChild(read);

    read.addEventListener("click", () => {
        read.classList.toggle('unread');
    });
}

submit.addEventListener('click', add);

尽管没有关于您要实现的目标的背景信息，但这将很困难。

顺便说一句：不，在函数内部声明的变量是有作用域的，你不能从外部访问它们

Answer 2

读取元素的 eventListener 未激活，因为首先如果您单击提交元素，则读取元素是一个元素。

解决方案：

function add() {
    read = document.createElement('div');
    read.textContent = 'Read';
    read.classList.add('read');
    card.appendChild(read);
    read.addEventListener("click", () => {
        read.classList.toggle('unread');
    });
}

submit.addEventListener('click', add);