forループを使用してhtml要素を作成する

私のコードで何が問題になっていますか？あなたはノードyがxから子として追加されx.appendChild(y)を呼び出すとforループを使用してhtml要素を作成する

// Declare variables 
 
var numberOfGrades = 0; 
 
var NL = "\n"; 
 

 

 

 
// Functions 
 
function setQuantity() { 
 
    numberOfGrades = document.getElementById("quantity").value; 
 

 
    var inputBox = document.createElement("INPUT"); 
 
    var BR = document.createElement("br"); // Break line 
 
    var gradeNumber = 1; 
 
    var gradeText = document.createTextNode("Grade " + gradeNumber + ":"); 
 

 
    for (var i = 0; i < numberOfGrades; i++) { 
 
    alert(numberOfGrades); 
 
    document.getElementById("formDiv").appendChild(BR); 
 
    document.getElementById("formDiv").appendChild(gradeText); 
 
    document.getElementById("formDiv").appendChild(inputBox); 
 
    gradeNumber++; 
 
    } 
 

 

 
}

body { 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
.container { 
 
    width: 100%; 
 
    background-color: lightcyan; 
 
    padding: 10px; 
 
}

<body> 
 

 
    <h1>Homework and Quiz average calculator</h1> 
 

 
    <p>Please Enter the required information to calcuate</p> 
 
    <div class="container" id="formDiv"> 
 
    <form id="formID"> 
 
     <p> 
 
     <strong>Calculate the average of homework grades</strong> 
 
     </p> 
 
     How many grades? 
 
     <input type="number" id="quantity" name="quantity" min="1" max="10" value="1"> 
 
     <!--<input onclick="setQuantity()" type="submit" value="Apply">--> 
 
    </form> 
 
    <button onclick="setQuantity()">APPLY</button> 
 
    <br> 
 
    </div> 
 

 
    <script src="script.js"></script> 
 

 
</body>

JSFiddle here

出典

2016-08-16 s.n

JSFiddleでは、 "Javascript"をクリックし、 "Load type"を "No wrap-in "に変更します。 JSFiddleはコードを自動的にラップしてグローバル変数を作成しないため、関数は使用できません。 –

右どうもありがとう！ –

しかし、パラメータ番号が1より大きい場合でも入力は1つしか作成されません。つまり、ユーザーが数値を3に設定して適用ボタンをクリックすると、関数は3つの入力要素を作成する必要があります。パラメータを無視する） –

：着信番号（数量）を使用して、HTMLの入力タグを作成することになっていますDOMに既に存在していた場所から削除します。例えば

：あなたは複数のノードを持つようにしたい場合は

var x = document.createElement("div"); 
var y = document.createElement("div"); 
var z = document.createElement("div"); 
x.appendChild(y); 
z.appendChild(y); // now y is not inside x any more, was **moved** to z

あなたがループ内でそれらを作成する必要があります。

出典

2016-08-16 21:50:38 6502

ありがとう！今働いている –

forループを使用してhtml要素を作成する

答えて

関連する問題