0

Le quiero cambiar los colores a los botones automaticamente con el setTimeout o el setInterval al dar click, pero sucede que se los cambia todos a la vez y no uno por uno, sincronizado...

¿Qué tengo que modificar para conseguir el resultado que quiero? usando el ciclo for clásico nada de for each, ya se que son lo mismo pero hasta ahora estoy aprendiendo y familiarizándome con for

function color() {
var umder = document.querySelectorAll(".button > button");


setInterval(function(){

for (var i = 0; i < umder.length; i++) {

umder[i].style.backgroundColor = "red";

}

}, 2000);

}
color();
<div class="button">
<button>1</button>
<button>2</button>
<button>3</button>
</div>

4
  • Es decir que sin dar clic se cambien uno tras otro después de 2 segundos el color a cada botón?
    – user128299
    Commented el 17 nov. 2019 a las 0:16
  • @Aprendiz al dar click a la function color() se ejecuta
    – Header90
    Commented el 17 nov. 2019 a las 0:18
  • Si el efecto para el color de fondo se va ejecutar cuando el usuario de clic en cada botón, entonces para que quieres el setInterval ?
    – user128299
    Commented el 17 nov. 2019 a las 0:19
  • No, al dar click quiero que comience a cambiar el color automáticamente uno por uno, pero no he logrado esa parte, el de elegir uno por uno y se vaya aplicando.
    – Header90
    Commented el 17 nov. 2019 a las 0:22

1 respuesta 1

3

function color() {
var umder = document.querySelectorAll(".button > button");
	var t = 1;
  for (var i = 0; i < umder.length; i++) {
    setTimeout(function(x) {
      return function() {
        umder[x].style.backgroundColor = "red";
      }
    } (i), 2000 * t);
		t++;
  }

}
color();
<div class="button">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

podrías realizarle con un setTimeout ya que el set interval se ejecuta cada cierto tiempo y va a cambiando a todos prueba con esto

function color() {
var umder = document.querySelectorAll(".button > button");
    var t = 1;
  for (var i = 0; i < umder.length; i++) {
    setTimeout(function(x) {
      return function() {
        umder[x].style.backgroundColor = "red";
      }
    } (i), 2000 * t);
        t++;
  }

}
color();
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.