Question

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

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

我是JavaScript的新手，可能会做错了。请让我知道！

提前致谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

来自MDN：

注意：当document.write写入文档流时，在已关闭（加载）的文档上调用document.write会自动调用document.open来清除文档。

所以你的问题是由document.write造成的。一旦write加载到已加载的文档中，其他所有内容都将丢失，包括您的javascript。（关于你如何使用它，你还有其他问题，但这是主要问题）。

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

＆＃13;

var a = [];

var count = 0;

function addNum() {
  a[count] = document.getElementById('input').value;
  count++;
}

function printValues() {
  document.getElementById('array').innerHTML = a.join(",");
}

＆＃13;

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

＆＃13;

你应该看看其他几件事。在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;
    }
}

另外，请在此处查看小提琴中的结果： Fiddle

Answer 4

声明“document.write（a [i]，”“）.innerHTML = array;”是错的。代码中没有声明名为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

您通常不会使用＆＃34;计数＆＃34;变量将项添加到数组但是会推送到数组但是我保留它以防万一你不需要它。
你会像其他人一样注意到没有对一个元素进行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/

使用For循环时不显示.innerHTML

5 个答案: