Kevin Powell - Community•2y ago

JS-function on array

Hey so, I've got an array and I need a listener on it that'll always be listening It has to run a function, using the index of the element within the array its been clicked on (As it would have to delete the element including its siblings and its parentElement However, I cannot put an addEventListener on the raw array it seems, this is what I've got:

let removeSelectors = document.getElementsByClassName("removeSelector")
removeSelectors.addEventListener("click", function(){console.log(removeSelectors)})
// Ive put a console.log bc I first wanted to test if it would work, then I was going to see how to make the function target the element you've clicked on

let removeSelectors = document.getElementsByClassName("removeSelector")
removeSelectors.addEventListener("click", function(){console.log(removeSelectors)})
// Ive put a console.log bc I first wanted to test if it would work, then I was going to see how to make the function target the element you've clicked on

As a sidenote, this function will have an array of [] in the beginning, as no elements will have that className yet (I figured to use getElementsByClassName as its dynamic and not static and the array can get longer and shorter, if one is deleted obv it'll get shorter if ones added itll get longer) The error in the console is:

Uncaught TypeError: removeSelectors.addEventListener is not a function
    at bingo.js:40:17
(anonymous) @ bingo.js:40

Uncaught TypeError: removeSelectors.addEventListener is not a function
    at bingo.js:40:17
(anonymous) @ bingo.js:40

16 Replies

Jochem•2y ago

you have to loop over the array:

for (let i = 0; i < removeSelectors.length; i++) {
  removeSelectors[i].addEventListener("click", function() {
    console.log(removeSelectors)
  });
}

for (let i = 0; i < removeSelectors.length; i++) {
  removeSelectors[i].addEventListener("click", function() {
    console.log(removeSelectors)
  });
}

BrightieOP•2y ago

oh I see and they'll always be listening then?

Jochem•2y ago

the elements that have been selected when document.getElementsByClassName("removeSelector") ran, will have those event listeners on them yes if you later add elements with removeSelector on them, those won't have event listeners. You have to add those when you add the element

BrightieOP•2y ago

hmm, okay then I think I'll add a run everytime when is added i already have the code that adds one ill just add a run there

Jochem•2y ago

just make sure to not re-add the listener to any element that already has it on there so don't just rerun document.getElementsByClassName("removeSelector") and loop over that result

BrightieOP•2y ago

Hmm, so what if I add the listener on creation of the element? instead of on the entire array add it when the element is being created would that do the trick?

Jochem•2y ago

yeah, that's usually how I do it

BrightieOP•2y ago

alright I'll see how that goes in a moment Alright it worked, I've added them on creation and they delete the entire family including parent As quick question regarding what I asked about in #Reformulating + check for if correct , this would have been more difficult if I were to use arrow syntax as I can't call this.parentElement when using arrow syntax, am I correct in this assumption? I'm asking this to ensure that I fully understand the key differences in function() & =>

Jochem•2y ago

you're right you wouldn't be able to use this, but you can use event.currentTarget instead https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

BrightieOP•2y ago

and that's basically the same as this then, I assume So theoretically speaking, it doesn't matter whether you use function() or => The only difference is how to call itself (but both are possible) and the fact that you have to use them on declare and cannot be used freely like a function() is able to

13eck•2y ago

Instead of having an event listener on each element, it's better to have one listener on the element's parent so even if you add/remove elements you don't have to worry about adding/removing listeners. It's called event delegation.

BrightieOP•2y ago

how did you put that text into a link?

13eck•2y ago

[Link text](<https://link.url>)

BrightieOP•2y ago

that's handy

13eck•2y ago

(be sure to have the URL inside <> otherwise Discord will do an embed: event delegation. Oh, I guess not. They fixed that

BrightieOP•2y ago

Alright, I'll go edit that part of the code now, having 1 listener instead of multiple seems like a good idea :p

Gaming

Programming

JS-function on array