My goal is to iterate through HTML DOM elements, which are defined by a certain classname. I want to change some of those names and for some reason the element_array.length is linked to getElementsByClassName even in the for loop, when just changing the classname. So the logic fails, as this loop suddenly stops at halve of the intended iterations. For 4 elements, only 2 iterations take place basically, since the iterations change the length of the array due to some weird, deep object linking.
var messages = document.getElementsByClassName("WidgetAction Toggle");
window.alert(messages.length); // Indicates a length of 4
for (let i=0; i < messages.length; i++)
{
window.alert(messages.length); // tells the length through the iterations
window.alert(messages[i].innerHTML); // shows the content of the element
messages[i].className='ToggleTicketMessageVisibility'; // changes the class of the element
}
window.alert("done"); // Indicates, that the loop finished
The output is as follows:
-4
-4
-"text"
-3
-"text"
-"done"
That means, that the second section in the for loop actually not only gets checked on each single loop, it also re-runs the "linked" function from before.
Setting it from var to const will not change the result in any way.
How can I change the parameters, which I used to get the array in the first place, without loosing them as part of the array? The thing is, I cannot simply use a while loop to check if still such an element exists, since I do not want to change the class of all of them later.
Sometimes to get rid of such referencing a simple jsonencode and jsondecode to copy an array is sufficient. But in this situation I need functional objects as array elements.
Is there a simple and clean way to achieve this goal without multiple loops?
Basically, what I want is "simple" in theory:
I want a FIXED list of elements before the loop starts and iterate over it, without anything being able to change the content by deep linked object logic.
