Essentially I've got a button on the website where you can add < span > elements that have a class called; class="text_box".
The idea is, whenever you click any of these elements with the class "text_box", it console.logs a message.
I've got a function that handles this.
Everytime a new element is created Dynamically (Via DOM.createElement) It reruns this function so that the querySelectorAll updates, therefore this newly created element is now part of that array. (the wysiTextElms array of elements with class="text_box")
function textElmEventListener(){
//Get's all Text box elements:
wysiTextElms = document.querySelectorAll(".text_box")
//Creates event listener for all of them.
for (const t_e of wysiTextElms) {
t_e.addEventListener("click", function(e) {
console.log(t_e);
});
}
};
The issue is..
Let's say I got 3 elements with the class "text_box"
<span contenteditable="" class="text_box">span1</span>
<span contenteditable="" class="text_box">span2</span>
<span contenteditable="" class="text_box">span3</span>
When I click on span1, I'll get:
<span contenteditable="" class="text_box">span1</span>
<span contenteditable="" class="text_box">span1</span>
<span contenteditable="" class="text_box">span1</span>
It repeats the command 3 times,
For span2, It will repeat twice
and only for span3 will it just execute the console.log once..
I've tried to use break
so that once it executes once it breaks out the loop, but it gives me the Illegal break statement.
Any insight is appreciated!