1

¿Cómo puedo mejorar este código? ¿Hay algún evento para cambiar de color?

No quiero usar estas condiciones if(color==0){, ¿Cuál sería otra forma de resolverlo?

var flecha=document.getElementById("flecha")
var color=0;
flecha.onclick = function() {
 if(color==0){ 
   this.style.borderBottom ="100px solid red";
   this.style.borderLeft ="50px solid transparent";
   this.style.borderRight ="50px solid transparent";
   color=1;
 }else{
   this.style.borderBottom ="100px solid #3af";
   this.style.borderLeft ="50px solid transparent";
   this.style.borderRight ="50px solid transparent";
   color=0;
 }
 }
#flecha{
  border-bottom:100px solid #3af;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  width: 0;
  height: 0;
}
<div id="flecha"> </div>

1 respuesta 1

3

Ya que solo necesitas cambiar el color del borde inferior y el resto de propiedades se mantiene igual solo deberías actualizar la propiedad this.style.borderBottomColor.

Además en lugar de un if podrías usar una operación matemática muy simple para dar vueltas dentro de un arreglo de colores: Sumar +1 para ir al color de la derecha y hallar el residio entre el número de elementos para dar la vuelta si se acaban los colores.

PD: También si deseas puedes agregar mas colores al arreglo sin necesidad de modificar el resto del código.

var colors = ["#3af", "red", "yellow", "magenta", "cyan"];
var selectedColor = 0;

document.getElementById("flecha").onclick = function() {
    selectedColor = (selectedColor + 1) % colors.length;
    this.style.borderBottomColor = colors[selectedColor];
}
#flecha{
    border-bottom: 100px solid #3af;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    width: 0;
    height: 0;
}
<div id="flecha"> </div>

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.