Question

第一次海报。

我试图在单击按钮后更改背景颜色。我尝试了几种不同的代码类型，但似乎一致的是数组没有正确迭代。

请帮忙

var color = ["red", "green", "blue"];
var i = 0;
document.querySelector("button").addEventListener("click", function() {
  i = i < color.length ? ++i : 0;
  document.querySelector("body").style.background = color[i];
})

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

body {
  background-color: blue;
}

<button>Click me to change background colour.</button>

Answer 1

你应该在递增时使用模数，以便它循环。

i = (i+1) % color.length;

Answer 2

所以，在 Javascript 中，数组从零开始，所以 color[0] 是红色，color[1] 是绿色，color[2] 是蓝色，当你说 color.length 时，它会返回 3。所以 color[3 ] 未定义，因为最后一个颜色在索引 2 处结束。此外，您应该从 i= -1 开始，因为当您从 0 开始并递增时，0 将变为 1，因此您会跳过第一个颜色。

var color = ["red", "green", "blue"];
var i = -1;
document.querySelector("button").addEventListener("click", function () {
  i = i < color.length - 1 ? ++i : 0;

  document.querySelector("body").style.background = color[i];
});

Answer 3

小心在 HTML 代码中的按钮之后加载 javascript 脚本，否则 querySelector 将找不到它！

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Background Colour Change</title>
    <link rel="stylesheet" href="new1.css">
</head>
<body>
    <button>Click me to change background colour.</button>
</body> 
<script src="new1.js"></script>

[编辑] 虽然这解决了您的问题，但它似乎不是加载脚本的最安全方式，您需要在文档准备好时进行监听。我建议在这个post

中做好准备

更改背景颜色 onclick

3 个答案: