Question

var colours = ["Blue","Red","Green","Yellow","Purple","Black","Orange"]
for (var i = 0; i<colours.length; i++){
  document.write(" " + colours [i]);
}

我必须创建一个网页，该网页具有一系列存储在数组中的颜色以循环遍历每个元素。问题是，结果是所有颜色都在一行中。如何使它每次都输出新行？

Answer 1

在 中添加一个document.write标记。  创建一个换行符，该换行符将打印新行中的下一个元素

var colours = ["Blue","Red","Green","Yellow","Purple","Black","Orange"]
for (var i = 0; i<colours.length; i++){
    document.write(" " + colours [i] + '<br>');
}

Answer 2

尝试以下操作-添加中断标签 ，为进一步简化，您还可以使用Array.join避免循环。

var colours = ["Blue","Red","Green","Yellow","Purple","Black","Orange"]
document.write(colours.join("<br/>"));

Answer 3

您必须使用 元素在HTML中创建新行。

您还可以创建一个字符串并将其写入文档一次。为此，请使用Array.map()将颜色数组映射到颜色加上 ，然后使用Array.join('')将此数组加入。

const colours = ["Blue","Red","Green","Yellow","Purple","Black","Orange"];

document.write(colours.map(c => `${c}<br>`).join(''));

或更简单地，将颜色数组与 字符串连接：

const colours = ["Blue","Red","Green","Yellow","Purple","Black","Orange"];

document.write(colours.join('<br>'));

Answer 4

使用换行符

var colours = ["Blue","Red","Green","Yellow","Purple","Black","Orange"]
for (var i = 0; i<colours.length; i++){
  document.write("<span style='background-color:"+colours[i]+"'>" + colours [i] +"</span><br>");
}

环形阵列不能单行打印

4 个答案: