更改背景颜色 onclick
[英]change background colour onclick
问题描述
第一次海报。
单击按钮后，我正在尝试更改背景颜色。 我尝试了几种不同的代码类型，似乎一致的是数组没有正确迭代。
请帮忙
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>
3 个解决方案
解决方案1
1 2021-04-05 20:54:16
您应该在递增时使用模数，以便它循环通过。
i = (i+1) % color.length;
解决方案2
1 2021-04-05 20:59:32
所以，在 Javascript 中，arrays 从零开始，所以 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];
});
解决方案3
-3 已采纳 2021-04-05 20:59:49
小心在 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>
[编辑] 虽然这解决了您的问题，但它似乎不是加载脚本的最安全方式，您需要在文档准备好时进行监听。 我建议在这篇文章中做好准备
更改背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.