.innerHTML使用for循环时不显示

Question

我正在尝试编写一个脚本，该脚本将允许用户在屏幕上输入数字，然后将它们添加到数组中，然后将这些值打印在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> 

Answer 1

从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中添加事件处理程序。

Answer 2

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循环中，我们使用+ =符号将数组值连接为变量。

Answer 3

您正在执行的操作不是在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;
    }
}

另外，在这里查看小提琴的结果：

Answer 4

语句“ 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);
}

Answer 5

• 通常，您不会使用“ count”变量将项目添加到数组中，而是会推送到数组中，但是我保留了它，以防您另外需要。
• 正如其他人指出的那样，您不会对元素进行document.write，而是使用innerHTML并将其替换或追加。
• 奇怪的是，您正在将innerHTML放在链接<a />元素中，但是由于这是您正在使用的内容，因此将重现该元素。
• 如果您确实想将它们用作数字（整数？），则需要使用parseInt(string, radix);来解析它们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/