.innerHTML在使用For循环时不显示

.innerHTML Not Displaying While Using a For Loop

本文关键字：显示 循环 For innerHTML      更新时间：2023-09-26

我正在尝试编写一个脚本，允许用户在屏幕中输入数字，将其添加到数组中，然后在innerHTML元素上打印值。

然而，当我尝试在for循环中使用它时，没有打印出任何内容，它会转到一个新页面，其中唯一显示的是输入的第一个数字。

我是JavaScript新手，可能做得不对。请告诉我！

提前感谢

var a = [];
var count = 0;
function addNum() {
  a[count] = document.getElementById('input').value;
  count++;
}
function printValues() {
  for (i = 0; i < a.length; i++) {
    document.write(a[i], " ").innerHTML = array;
  }
}
<input type="text" id="input">
<br>
<input type="button" onclick="addNum();" value="Add Number">
<br>
<input type="button" onclick="printValues();" value="Print Numbers">
<p>
  <a id="array"></a>
</p>

来自MDN:

注意：当document.write写入文档流时，对已关闭(加载(的文档调用document.write会自动调用document.open，这将清除文档。

所以你的问题是由document.write引起的。一旦write到已经加载的文档，其他所有内容都会被丢弃，包括javascript。(你在使用它的过程中也遇到了其他问题，但这是主要问题(。

您有一个id为array的元素，我认为它是您想要放置数字的地方。因此，您需要使用getElementById获取该元素，然后设置其innerHTML。您可以使用array.join来避免循环。

var a = [];
var count = 0;
function addNum() {
  a[count] = document.getElementById('input').value;
  count++;
}
function printValues() {
  document.getElementById('array').innerHTML = a.join(",");
}
<input type="text" id="input">
<br>
<input type="button" onclick="addNum();" value="Add Number">
<br>
<input type="button" onclick="printValues();" value="Print Numbers">
<p>
  <a id="array"></a>
</p>

你还应该考虑其他一些事情。在addNum中添加数字后，你可能应该通过将value设置为null来清除文本框。其次，最好在代码中而不是在HTML中添加事件处理程序。

function printValues() {
    var strValues='';  // Initialize a temporary variable 
    for (i = 0; i < a.length; i++) {
      strValues += a[i] + ' ';            
    }
    document.write(strValues); //Writting variable to document.
}

在上面的例子中，我们创建了一个临时变量，并将默认值设置为空白。然后在for循环中，我们使用+=符号将数组值连接到变量。

您所做的不是在innerHTML中设置内容的正确方式。此外，您不会保留要打印到屏幕上的值。每次，你点击打印，用户输入的新值刚刚通过，旧值就会被新值取代。这里，一旦用户完成了他/她的输入，变量valueToBePrinted将始终记住最后输入的值，因为它将所有输入的值连接到它。

查看以下代码：

var a = [];
var count = 0;
function addNum() {
    a[count] = document.getElementById('input').value;
    console.log(a[count]);
    count++;
}
function printValues() {
    var valueToBePrinted='';
    for (i=0;i<a.length;i++) {
      valueToBePrinted += a[i] + ' ';
      console.log(valueToBePrinted)
      document.getElementById('array').innerHTML =valueToBePrinted;
    }
}

此外，请查看Fiddle中的结果：Fiddle

语句"document.write(a[i]，"(.innerHTML=array；"是错误的。代码中没有声明名为数组的变量。

使用document.write打印所有数字的正确形式是

for (i=0;i<a.length;i++) {
     document.write(a[i] + " ");
}

如果你需要所有输入数字的总和并打印总和，那么你可以简单地在点击addNumber按钮时将其相加为一个变量，

var total = 0;
function addNum() {
    total += Number(document.getElementById('input').value);
}
function printValues() {
    document.write(total);
}
  • 您通常不会使用"count"变量向数组中添加项，而是将其推送到数组中，但我保留了它，以防您需要它
  • 正如其他人所指出的，您不需要对元素执行document.write操作，而是使用innerHTML并替换或附加到该元素
  • 同样奇怪的是，您将innerHTML放在链接<a />元素中，但由于这就是您正在使用的内容，我将重现它
  • 如果您确实想将它们用作数字(整数？(，则需要使用parseInt(string, radix);或parsefloat来解析它们
  • 您没有将i设置为变量对象，所以我在这里这样做了

此处略微修改代码：

var a = [];
var count = 0;
function addNum() {
    a.push(parseInt(document.getElementById('input').value, 10));
    count++;
}
function printValues() {
    var i;
    var myValues = "";
    for (i = 0; i < a.length; i++) {
        myValues = myValues + a[i] + " ";
    }
    var element = document.getElementById("array");
    element.innerHTML = myValues;
}

以下是作为工作示例复制的代码：http://jsfiddle.net/coffw8tg/

相关文章：