0
ページが読み込まれたときに既存の要素を新しいものに変換するスクリプトを作成しようとしていますが、明らかに失敗します。Javascript：ページの読み込み時にクラス名ですべての要素を取得しない
<html>
<head>
<script>
var f__inputs = [];
document.addEventListener('DOMContentLoaded', function() {
\t f__init();
}, false);
function f__init(){
\t f__inputs = document.body.getElementsByClassName("superinput");
\t console.log(f__inputs);
\t f__insert();
}
function f__insert(){
\t for(var i=0;i<f__inputs.length;i++){
\t \t f__inputs[i].id = "superinput-wrapper-" + i;
\t \t f__inputs[i].className = "superinput-wrapper";
\t \t var d = f__inputs[i].getAttribute("data-fields");
\t \t for(var j=0;j<d;j++){
\t \t \t var input = document.createElement("input");
\t \t \t input.setAttribute("data-wrap",i);
\t \t \t input.setAttribute("data-pos",j);
\t \t \t input.setAttribute("size","1");
\t \t \t input.setAttribute("type","text");
\t \t \t input.id = "superinput-input-" + j;
\t \t \t input.className = "superinput-input";
\t \t \t
\t \t \t if(j!=0){
\t \t \t \t input.setAttribute("disabled","true");
\t \t \t \t input.disabled = true;
\t \t \t }
\t \t \t f__inputs[i].appendChild(input);
\t \t }
\t }
}
</script>
</head>
<body>
<p>
\t <b>Task 90.</b>
\t Lorem ipsum dolor sit amet...
\t <div class="superinput" data-fields="6"></div>
</p>
<p>
\t <b>Task 91.</b>
\t Lorem ipsum dolor sit amet...
\t <div class="superinput" data-fields="6"></div>
</p>
<p>
\t <b>Task 91.</b>
\t Lorem ipsum dolor sit amet...
\t <div class="superinput" data-fields="6"></div>
</p>
</body>
</html>任意のアイデアである理由：
は、ここで（状態三つの要素がありますが、一つだけ表示されます）を、これらの要素の配列の本当に奇妙出力ですそれが起こっている？
ぺチンティックであるが配列ではない。 – ste2425
ログに記録されたオブジェクトがログに記録されてから開発者ツールで調べられるまでに変更された場合、console.logの結果が信頼できない状況があります。生成されたhtmlを見るほうが助かります。 btwでは、私たちが答えを出すのを待つのではなく、デバッガでコードをステップ実行し、各ステップでDOMがどのように変更されているかを確認してください。 – jdigital
'getElementsByClassName（）'は、NodeListを提供します。具体的には、array- * like *オブジェクトのHTMLCollectionです。 'split'、' push'、 'reduce'など、いくつかの基本的なプロパティを' .length'のように使うことができますが、ArrayメソッドとArray（および特定の程度のString）に独占的なプロパティは使用できません。 – zer00ne