Использование для цикла для создания элементов html

Что не так с моим кодом? Предполагается создать входные теги в HTML с помощью входящего номера (количество):Использование для цикла для создания элементов 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 и нажимает кнопку Apply, функция должна создавать 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

Спасибо! Сейчас он работает –

Использование для цикла для создания элементов html

ответ

Смежные вопросы