使用for循環來創建html元素

我的代碼有什麼問題？它應該建立在HTML的輸入標籤使用的來電號碼（數量）：使用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個輸入元素，現在它只創建1個忽略參數） –

當你調用x.appendChild(y)節點y被添加作爲一個孩子從x如果已經在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元素

回答

相關問題