Kai*_*ler 0 html javascript arrays for-loop
我正在练习课程,并希望制作一个简单的代码来遍历数组中的每个字符串.然而,实际发生的是它一遍又一遍地显示数组中的每个字符串,而不是将一种颜色替换为另一种颜色.我该怎么做呢？
<!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];
}
编辑:JSFiddle示例