using for loop to create html elements

Question

What is wrong with my code? It is supposed to create input tags in html with using the incoming number (quantity):

// 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

In JSFiddle, click on "Javascript" then change "Load type" to "No wrap - in <body>". Your function isn't available because JSFiddle automatically wraps your code up to avoid creating global variables. — Mike Cluck
– Mike Cluck, Commented Aug 16, 2016 at 21:50
However, it is still creating only 1 input even if the parameter number is higher than 1. (Meaning, if the user sets the number to 3 and clicks the apply button, the function should create 3 input elements. Now its creating only 1 ignoring the parameter) — s.n
– s.n, Commented Aug 16, 2016 at 21:54
Off topic, but you could cache the value of getElementById in a variable. E.g., var formDiv = document.getElementById("formDiv"); and put it before the loop. Then you're not looking for that element for every grade. It doesn't make much difference speed-wise, but maintainability will be better. — Heretic Monkey
– Heretic Monkey, Commented Aug 16, 2016 at 21:54
Check out 6502's answer. You need to create a new element every time you want another element in the DOM. — Mike Cluck
– Mike Cluck, Commented Aug 16, 2016 at 21:55

6502 · Accepted Answer · 2016-08-16 22:15:37Z

2

When you call x.appendChild(y) the node y is added as a child from x removing it from where it was if already in the DOM.

For example:

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

If you want to have multiple nodes you need to create them inside the loop.

edited Aug 16, 2016 at 22:15

answered Aug 16, 2016 at 21:50

6502

115k17 gold badges177 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using for loop to create html elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related