Estoy trabajando en un botón Me gusta para un sitio web que estoy creando y tengo una pieza simple de JavaScript que cambia el color a rojo cuando se hace clic en él, pero ¿cómo puedo hacer que el color se alterné para que si vuelves a hacer clic en él? vuelve a negro que cambia a rojo nuevamente si hace clic en él en otro momento, etc.
const btn = document.getElementById("like"); btn.addEventListener('click', function onClick() { btn.style.color = 'crimson'; });Use el método de classList toggle
Y, como regla general, debe esforzarse por evitar establecer un "estilo en línea" ( element.style.xxx = xxx ), ya que esto crea un estilo para el elemento que solo puede ser anulado por otro estilo en línea, lo que lleva a la duplicación de código. y, por lo tanto, código que no escala bien. En su lugar, trate siempre de trabajar con clases CSS.
document.getElementById("like").addEventListener('click', function() { this.classList.toggle("active"); }); .active { color:crimson; } <button id="like">Like</button>puedes seguir estos pasos
Primero tomemos una variable de contador
let clickCount = 0;Luego agregue el evento de clic. Hare es su código:
const btn = document.getElementById("like"); let clickCount = 0; btn.addEventListener("click", () => { clickCount++; if (clickCount > 1) { btn.style.color = "red"; } }); <button id="like">Like</button>