Question

我想在点击按钮后让程序改变div的背景颜色。

首次点击后，应将一种颜色更改为第二种颜色。第二次单击后，颜色应返回第一个选项。并且最后一次，颜色应该再次切换到第二个选项。所以它应该工作3次。但在我的代码中它只适用于第一次点击。

我做错了什么？

＆＃13;

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;

＆＃13;

Answer 1

每次点击时，您都会添加一个新的，相同的事件处理程序。相反，只需在页面加载时添加一次，这样多余的处理程序就不会相互抵消。

＆＃13;

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);
};

＆＃13;

#sq {
  width: 100px;
  height: 100px;
  position: relative;
}

＆＃13;

<button id=button>CLICK</button>
<div id=sq></div>

＆＃13;

虽然不知道你想要什么，但我删除了它。它会立即运行，因此您永远不会看到如此快速的颜色变化。

Answer 2

试试这个：

var isPink = true;
var color = "#BA498B"

function changeColor() {

    var colorA = "#BA498B";
    var colorB = "#5964E3";


        if (isPink) {
            color = (colorB);
            isPink = false;      
        }  else {
            color = (colorA);
            isPink = true;
        } 
}



window.onload = function(){
    var btn = document.getElementById('button');
    var box = document.getElementById('sq');

    btn.addEventListener('click', function () {
        changeColor();
        box.style.backgroundColor = color;
    });
};

这样我只在按钮上使用'addEventListener'

Answer 3

以下是一个可以帮助您的示例：

＆＃13;

var btn = document.getElementById('button');
var box = document.getElementById('sq');
var isPink = true;

function changeColor() {  
  var colorA = "#BA498B";
  var colorB = "#5964E3";
  var color=isPink?colorA:colorB;
  isPink=isPink?false:true;
  return color;
}


function change() {
  box.style.backgroundColor = changeColor();
}
btn.addEventListener('click', change);
window.onload = change();

＆＃13;

<h1 id="sq">Test Text for Example</h1>
<button id="button">Click</button>

＆＃13;

JavaScript按钮在第二次点击时不起作用

3 个答案: