我想让一个程序在单击按钮后更改 div 的背景颜色。
第一次单击后，它应该将一种颜色更改为第二种颜色。第二次点击后，颜色应该回到第一个选项。最后一次，颜色应该再次切换到第二个选项。所以它应该工作3次。但在我的代码中，它只适用于第一次点击。
我做错了什么？
var btn = document.getElementById('button');
var box = document.getElementById('sq');
function changeColor() {
var isPink = true;
var colorA = "#BA498B";
var colorB = "#5964E3";
var i = 0;
while (i < 3) {
if (isPink) {
change(colorB);
isPink = false;
i++;
} else {
change(colorA);
isPink = true;
i++;
}
}
}
function change(color) {
btn.addEventListener('click', function () {
box.style.backgroundColor = color;
});
}
window.onload = changeColor;每次单击时，您都会添加一个新的、相同的事件处理程序。而是在页面加载时添加一次，以便冗余处理程序不会相互抵消。
var isPink = true;
function changeColor() {
var colorA = "#BA498B";
var colorB = "#5964E3";
if (isPink) {
change(colorB);
} else {
change(colorA);
}
isPink = !isPink;
}
function change(color) {
document.getElementById('sq').style.backgroundColor = color;
}
window.onload = function() {
document.getElementById('button').addEventListener('click', changeColor);
};#sq {
width: 100px;
height: 100px;
position: relative;
}<button id=button>CLICK</button>
<div id=sq></div>不知道你想要什么循环，所以我删除了它。它会立即运行，因此您永远不会看到如此快速的颜色变化。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句