Quiero hacer que un programa cambie el color de fondo de un div después de hacer clic en un botón.

Después del primer clic, debería cambiar un color al segundo. Después del segundo clic, el color debería volver a la primera opción. Y por última vez, el color debe cambiarse nuevamente a la segunda opción. Por lo tanto, debería funcionar 3 veces. Pero en mi código funciona solo para el primer clic.

¿Qué hice mal?

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;
0
Salar 27 oct. 2017 a las 17:16

3 respuestas

La mejor respuesta

Estás agregando un controlador de eventos nuevo e idéntico cada vez que hay un clic. En su lugar, solo agrégalo una vez cuando se cargue la página, para que los controladores redundantes no se cancelen entre sí.

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>

Sin embargo, no sé qué querías con el bucle, así que lo eliminé. Se ejecuta de inmediato, por lo que nunca vería un cambio de color tan rápido.

1
llama 27 oct. 2017 a las 14:22

Aquí hay un ejemplo que puede ayudarlo:

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>
0
Ferhado 27 oct. 2017 a las 14:32

Prueba esto:

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

De esta manera solo estoy usando 'addEventListener' en el botón una vez

0
TKoL 27 oct. 2017 a las 14:23