如何使用for循环在JavaScript中显示多次

Question

我在W3学校学习JS，遇到了这个检查属性长度的程序。 后来我修改了它以显示元素具有的属性的名称。 这是代码

 function myFunction() { for (var counter = 0; counter < 2; counter++) var a = document.getElementById("myBtn").attributes[counter].name; document.getElementById("output").innerHTML = a; }

 <html> <body> <p>Click the button to see how many attributes the button element have.</p> <p id="output"> </p> <button id="myBtn" onclick="myFunction()">Try it</button> </body> </html>

我希望O / P为：

id onclick

但是由于某种原因，它仅显示元素拥有的最后一个属性，在这种情况下，如果元素是类或其他内容，则它会显示其onclick 。

是什么原因呢？

Answer 1

您的代码中有一个非常简单的错误。 您的代码将首先将<p>元素的innerHTML设置为“ id”。 然后，它将使用下一个属性（即“ onclick”）覆盖它。 要解决此问题，请更改

document.getElementById('output').innerHTML = a

至

document.getElementById('output').innerHTML += a + "<br>"

<br>只是将属性彼此分开。 这是整个代码段：

 function myFunction() { for (var counter = 0; counter < 2; counter++) { var a = document.getElementById("myBtn").attributes[counter].name; document.getElementById("output").innerHTML += a + "<br>"; } }

 <html> <body> <p>Click the button to see how many attributes the button element have.</p> <p id="output"> </p> <button id="myBtn" onclick="myFunction()">Try it</button> </body> </html>

Answer 2

尝试以下

function myFunction() {
var a="";
  for (var counter = 0; counter < 2; counter++){
     a+= document.getElementById("myBtn").attributes[counter].name;
}
  document.getElementById("output").innerHTML = a;
}

您的代码显示最后一个设置为a的值。 并且您没有将属性名称追加/添加到，而是使用覆盖了

var a = ....

Answer 3

目前，您需要a每次循环运行时重新分配a （ var a = ... ）：

function myFunction() {
  for (var counter = 0; counter < 2; counter++) {
    var a = document.getElementById("myBtn").attributes[counter].name;
  }
  document.getElementById("output").innerHTML = a;
}

这意味着a最终是最后一个项目。

也许改为将每个属性添加到数组中：

function myFunction() {
  var arr = [];
  for (var counter = 0; counter < 2; counter++) {
    arr.push(document.getElementById("myBtn").attributes[counter].name);
  }
  document.getElementById("output").innerHTML = arr.join(' ');
}

另外，在您的示波器所在的位置使用花括号。 你想要的output是在循环之后。

Answer 4

发生这种情况是因为您更改了元素的innerHTML，这意味着您更改了该元素的整个HTML。

要执行所需的操作，可以将结果连接到当前的innerHTML上，或创建元素并在其中添加值，然后将其附加到文档中。

例如：

var output = document.getElementById('output');
output.innerHTML = output.innerHTML + ' - ' + a;

如何使用for循环在JavaScript中显示多次

问题描述

4 个解决方案

解决方案1
2 已采纳 2017-01-17 13:12:19

解决方案2
1 2017-01-17 13:06:04

解决方案3
1 2017-01-17 13:06:44

解决方案4
1 2017-01-17 13:09:20

如何使用for循环在JavaScript中显示多次

问题描述

4 个解决方案

解决方案1 2 已采纳 2017-01-17 13:12:19

解决方案2 1 2017-01-17 13:06:04

解决方案3 1 2017-01-17 13:06:44

解决方案4 1 2017-01-17 13:09:20

解决方案1
2 已采纳 2017-01-17 13:12:19

解决方案2
1 2017-01-17 13:06:04

解决方案3
1 2017-01-17 13:06:44

解决方案4
1 2017-01-17 13:09:20