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 ，如果它是 class 或其它它会显示的那个。

原因是什么？

Answer 1

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

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

到

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

<br>只是将属性彼此分开。以下是整个片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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的最后一个值。并且您不会将属性的名称附加/添加到a，而是使用

覆盖a

var a = ....

Answer 3

目前，每次循环运行（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 个答案: