Question

我正在尝试在for循环中打印数组，但我的代码无效。我做错了吗？

＆＃13;

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

for (i = 0; i < fLen; i++) {
  document.getElementById("demo").innerHTML = fruits[i];
}

＆＃13;

<h2>JavaScript Arrays</h2>
<p id="demo"></p>

＆＃13;

Answer 1

你在循环的每次迭代中都覆盖了前一个输出，所以最后你只能看到最后一个水果的名字。

而不是循环，只需使用join：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").textContent = fruits.join('\n');

#demo { white-space: pre }

<h2>JavaScript Arrays</h2>
<p id="demo"></p>

请注意，我使用CSS（white-space: pre）来确保新行是这样呈现的。

Answer 2

在每次迭代中，您使用最新的innnerHTML项覆盖friuts。使用+=运算符代替=来保留之前的所有结果。

＆＃13;

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
for (i = 0; i < fLen; i++) {
   document.getElementById("demo").innerHTML += " "+ fruits[i];
 }

＆＃13;

<h2>JavaScript Arrays</h2>
<p id="demo"></p>

＆＃13;

Answer 3

这会有所帮助;使用createElement，在para标签内插入每个数组，并将para标签作为div的子项插入（带有id demo）

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<div id="demo"></div>

<script>
var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
for (i = 0; i < fruits.length; i++) {
  let ptag = document.createElement("p");
  let text = document.createTextNode(fruits[i]);
  ptag.appendChild(text);
   document.getElementById("demo").appendChild(ptag);
 }

</script>

</body>
</html>

Answer 4

最简单的方法id迭代数组（我正在使用forEach循环）并从每个元素构建一个字符串并将其转换为html。注意U已将显示更改为ul - 因为它最能代表您正在显示的内容。

＆＃13;

var str = '';
var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.forEach(function(fruit) {
 str += '<li>' + fruit + '</li>';  
})

document.getElementById("demo").innerHTML = str;

＆＃13;

<ul id="demo"></ul>

＆＃13;

Answer 5

您编写的代码会覆盖每次迭代时

标记中显示的数据。我建议你使用＆＃34; join（）＆＃34;功能

Answer 6

keystore

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
for (i = 0; i < fLen; i++) {

   document.getElementById("demo").innerHTML += "</br>"+fruits[i]
 }

无法打印所有数组元素

6 个答案: