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

【问题标题】：JavaScript button doesn't work on second clickJavaScript 按钮在第二次点击时不起作用
【发布时间】：2017-10-27 14:16:08
【问题描述】：

我想让一个程序在单击按钮后更改 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;

【问题讨论】：

你每次只运行一次'changeColor'，而'isPink'变量每次都以true开始。

标签： javascript button onclick

【解决方案1】：

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

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>

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

【讨论】：

【解决方案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'

【讨论】：

【解决方案3】：

这是一个可以帮助你的例子：

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

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

【讨论】：