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

Question

I want to make a program changing background color of a div after clicking on a button.

After first click it should change one color to the second one. After second click the color should come back to the first option. And for the last time, the color should be switched again to the second option. So it should work for 3 times. But in my code it works just for the first click.

What did I do wrong?

 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; 

Answer 1

You're adding a new, identical event handler every time there's a click. Instead just add it once when the page loads, so that the redundant handlers don't cancel each other out.

 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> 

Don't know what you wanted with the loop though, so I removed it. It runs immediately, and so you'd never see such a rapid color change.

Answer 2

try this:

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

This way I'm only using 'addEventListener' on the button once

Answer 3

Here is an example which may help you:

 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>