javascript - for 函数在 javascript 中直接结束

Question

我刚刚开始编写 html 和 java 脚本，我对下面的代码有一个问题，我不知道为什么它只用 for 设置的最后一个数字来写文本，请帮助我.. .

function func() {
  var a;
  for (var j = 1; j <= 6; j++) {
    a = "text";
    a += j;
    document.getElementById("page").innerHTML = document.getElementById(a).value + " ";
  }
}

<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<input type="text" id="text4">
<input type="text" id="text5">
<input type="text" id="text6">

<input type="button" id="startbutton" value="tap" onclick="func()">

<br>

<p id="page"> </p>

Answer 1

问题是您没有附加 HTML。您应该使用 += 添加到现有的字符串。

此外，每次检索元素并附加 html 时都存在性能问题。最好存储/更新变量中的值，最后设置 innerHTML 的值。

此外，您应该避免创建额外的变量 a 来提取 id。您可以简单地执行如下所示的操作。

function func() {
  
  var html = "";
  for (var j = 1; j <= 6; j++) {
    html += document.getElementById("text" + j).value + " ";
  }
  document.getElementById("page").innerHTML = html;
}

<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<input type="text" id="text4">
<input type="text" id="text5">
<input type="text" id="text6">

<input type="button" id="startbutton" value="tap" onclick="func()">

<br>

<p id="page"> </p>