我正在练习类(class)作业，想要编写一个简单的代码来循环遍历数组中的每个字符串。然而，实际发生的情况是，它一遍又一遍地显示数组中的每个字符串，而不是将一种颜色替换为另一种颜色。我该怎么做？
<!DOCTYPE html>
<html>
<head>
<title>Arrays</title>
<script>
colours = [" Purple"," Blue"," Pink"," Red"," Green"];
function change() {
for (i = 0; i < colours.length; i++) {
document.getElementById("hai").innerHTML += colours[i];
}
}
</script>
</head>
<body>
<p>The colour is: <span id=hai></span></p>
<button id="btn" onclick="change()">Change!</button>
</body>
</html>
colours = [" Purple", " Blue", " Pink", " Red", " Green"];
function change() {
for (i = 0; i < colours.length; i++) {
document.getElementById("hai").innerHTML += colours[i];
}
}<p>The colour is: <span id=hai></span></p>
<button id="btn" onclick="change()">Change!</button>最佳答案
这是因为您附加节点的innerHTML，而不是简单地设置它，如下所示:
document.getElementById("hai").innerHTML = colours[i];
但是，我怀疑这仍然不完全是您想要的 - 我猜您每次点击后都想要一种新的颜色，在这种情况下，代码应该类似于:
var colours = [" Purple"," Blue"," Pink"," Red"," Green"];
var currentColourIndex = 0;
function change() {
document.getElementById("hai").innerHTML = colours[++currentColourIndex % colours.length];
}
关于javascript - For 循环和数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36174700/