Javascript: get all elements by class name on page load NOT WORKING
Question
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):
<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?
1 answers
solution1
2 ACCPTED 2016-05-29 20:04:08
Two things.
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.
getElementsByClassNameis a live list . This means when you setclassName = "something-else", it is removed from the list. For this reason, it is recommended that you loop through them usingfor( i=l-1; i>=0; i--)instead of the usual loop.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.