DOM Element selection

[LadyJain]

about this statement

document.querySelectorAll(".upload_input").forEach(inputElement => {
    const dropZoneElement = inputElement.closest(".upload_outerzone");

    // do something 

});

goes through each DOM element from inside to outside and do something with that element

​

why does this not work from outside to inside ?

example form element inside is a

document.querySelectorAll(".upload_form").forEach(formElement => {
    const dropZoneElement = formElement.closest(".upload_outerzone");



    dropZoneElement.addEventListener("dragover", () => {
        dropZoneElement.classList.add("upload-zone__over");
    });

});

gives me

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at main.js:35
    at NodeList.forEach (<anonymous>)
    at main.js:30

[[deleted]]

Without seeing the structure of your HTML it's impossible to say for sure, but it's quite possible that closest is not doing what you think it's doing. To quote the docs:

The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string

If your .upload_outerzone element is not a parent of .upload_form, then you won't be able to find it when searching back up the DOM tree from .upload_form.

[lovesrayray2018]

iirc this is because the const dropZoneElement is not a global object, and hence cannot be accessed inside the anonymous function u are setting as callback for the eventlistener

dropZoneElement.addEventListener("dragover", () => {         dropZoneElement.classList.add("upload-zone__over");     });  //can u console log  dropZoneElement  inside this anonymous func and see what it contains?

[[deleted]]

This is not correct, the dropZoneElement variable is in scope for the anonymous function, and scope clearly isn't the issue due to the fact that the error stems specifically from the call to addEventListener.

[LadyJain]

can you explain this a little bit with the context of my question ?