Lex Laiden Lex Laiden - 6 months ago 12
HTML Question

Javascript: get all elements by class name on page load NOT WORKING

I'm trying to create a script that would transform existing elements on page to new ones when the page loads, but fail, obviously.

Here's a really weird output of an array of those elements (states three elements are there, but shows only one):

enter image description here



<html>
<head>
<script>
var f__inputs = [];

document.addEventListener('DOMContentLoaded', function () {
f__init();
}, false);

function f__init(){
f__inputs = document.body.getElementsByClassName("superinput");
console.log(f__inputs);
f__insert();
}

function f__insert(){
for(var i=0;i<f__inputs.length;i++){
f__inputs[i].id = "superinput-wrapper-" + i;
f__inputs[i].className = "superinput-wrapper";
var d = f__inputs[i].getAttribute("data-fields");
for(var j=0;j<d;j++){
var input = document.createElement("input");
input.setAttribute("data-wrap",i);
input.setAttribute("data-pos",j);
input.setAttribute("size","1");
input.setAttribute("type","text");
input.id = "superinput-input-" + j;
input.className = "superinput-input";

if(j!=0){
input.setAttribute("disabled","true");
input.disabled = true;
}
f__inputs[i].appendChild(input);
}
}
}

</script>
</head>
<body>

<p>
<b>Task 90.</b>
Lorem ipsum dolor sit amet...
<div class="superinput" data-fields="6"></div>
</p>
<p>
<b>Task 91.</b>
Lorem ipsum dolor sit amet...
<div class="superinput" data-fields="6"></div>
</p>
<p>
<b>Task 91.</b>
Lorem ipsum dolor sit amet...
<div class="superinput" data-fields="6"></div>
</p>

</body>
</html>





Any idea why is that happening?

Answer

Two things.

  1. Mouse over the [i] and you'll see it tells you that the values of the array are "frozen" when you expand it and may not reflect the realtime values.

  2. getElementsByClassName is a live list. This means when you set className = "something-else", it is removed from the list. For this reason, it is recommended that you loop through them using for( i=l-1; i>=0; i--) instead of the usual loop.