eventlistener can't access variable outside function

Question

the read element was appended to another div container element by the submit eventlistener. but I can't access the read element when trying to attach it to another event listener outside the function. Any idea how to fix this?

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');
    });

Put `read.addEventListener()` inside `add()`? There is no logical way for this to work, you want to add an event listener to an element that does not exist yet. Or use event delegation: [What is DOM Event delegation?](https://stackoverflow.com/q/1687296) — VLAZ, Jun 13 '22 at 14:54
But if I put the eventlistener inside the function it will then fire when the submit button gets clicked. Not the read button. That's what I'm confused about — Butterman, Jun 13 '22 at 16:24
Event listeners DO NOT RUN IMMEDIATELY. That is the whole reason they exist - they are fired when a certain event happens. `submit.addEventListener('click', add);` only execute `add` when `submit` is clicked. That's *what an event listener is* - listens for events and responds when they happen. How else would a click listener work if it never ran when a click occurred but before? That would mean every button is dead. — VLAZ, Jun 13 '22 at 16:27
https://jsbin.com/xunibezaki/edit?html,js,console,output - notice how there is nothing in the console until the button is clicked. — VLAZ, Jun 13 '22 at 16:29
I know what an event listener is. The confusing thing for me is if the read button is nested inside the function add() then how can it run independently? Meaning it would only work when the submit button gets clicked because the submit button actually call the function add(). And the eventlistener attached to read is inside that function. Hope you understand my confusion. — Butterman, Jun 13 '22 at 17:16
When the button is clicked, then `add` is executed. A new DOM element is created as well as a the handler for it.If the button is clicked again, then `add()` gets executed again and a new element + handler are created and added. That's all there is to it. https://jsbin.com/xovoreqore/1/edit?html,css,js,output — VLAZ, Jun 13 '22 at 17:32

score 0 · Answer 1 · answered Jun 13 '22 at 14:56

You code is not really correct. I would suggest:

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);

Although without a context on what you are trying to achieve it's going to be difficult.

BTW: no, variables that are declared inside a function are scoped, you cant access them from outside

score 0 · Answer 2 · answered Jun 13 '22 at 14:58

0

The read element's eventListener isn't activated, because first if you click on the submit element the read element is an element.

Solution:

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);

answered Jun 13 '22 at 14:58

Jojos bizzare JS

65
2
9

but then the eventlistener will fire when I click submit and not read. I need a separate eventlistener for read. How can I achieve that? – Butterman Jun 13 '22 at 15:22

eventlistener can't access variable outside function

2 Answers2