Question

我刚刚开始编码html和java脚本，并且我在下面的这段代码中遇到了问题，我不知道为什么它只用最后设置的数字写文本，请帮帮我。

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。您应该使用if not os.path.basename(__file__).endswith('c'): ...添加到现有的+=。

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

此外，您应该避免创建额外的变量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;
}

Answer 2

在循环外使用设置innerHtml！

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

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

尝试使用+=而不是=来保留以前的值。由于该值为纯文本，因此最好使用textContent而不是innerHTML。您还可以减少一些代码：

document.getElementById("page").textContent += document.getElementById(a).value + " ";

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

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

您还可以使用querySelectorAll()和forEach()尝试以下方法：

function func(){
  var input = document.querySelectorAll('input[type=text]');
  var str = '';
  input.forEach(function(el){
    str += el.value + ' ';
  });
  document.getElementById("page").textContent = str;
}

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

for函数只是在Java脚本中直接结束

3 个答案: