logo标签列表

使用for循环创建HTML元素

javascripthtml
4
我的代码有什么问题？它应该使用传入的数量在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

2
在JSFiddle中，点击“Javascript”，然后将“Load type”更改为“No wrap - in <body>”。你的函数不可用，因为JSFiddle会自动包装你的代码，以避免创建全局变量。 - Mike Cluck
好的！非常感谢！ - s.n
然而，即使参数数目大于1，它仍只创建1个输入。 （也就是说，如果用户将数字设置为3并单击应用按钮，则该函数应创建3个输入元素。现在它只创建1个忽略参数） - s.n
离题了，但是你可以将 getElementById 的值缓存到一个变量中。例如，var formDiv = document.getElementById("formDiv"); 并将其放在循环之前。这样你就不需要为每个成绩寻找该元素。速度方面并没有太大的区别，但可维护性会更好。 - Heretic Monkey
请查看6502的答案。每当您想在DOM中添加另一个元素时，都需要创建一个新元素。 - Mike Cluck
谢谢。我把变量移到循环内部了，现在没问题了。 - s.n
1个回答
2
当你调用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

如果您想要多个节点，您需要在循环内部创建它们。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接