Necesito tu ayuda en algo,
Intento alternar entre clases cuando hago clic en un elemento en una página HTML, pero desafortunadamente, una vez que lo hago, no puedo volver a cambiarlo.
Incluso intenté devolver el querySelector pero no tuve suerte.
Aquí está el código que escribí;
let fetchNumbers = document.querySelectorAll(`.cardnumber`); for (let index = 0; index < fetchNumbers.length; index++) { if (fetchNumbers[index].classList.contains('unselected') === true) { fetchNumbers[index].addEventListener(`click`, function() { fetchNumbers[index].classList.add(`selected`); fetchNumbers[index].classList.remove(`unselected`); fetchNumbers = document.querySelectorAll(`.cardnumber`); return fetchNumbers; }); } else { fetchNumbers[index].addEventListener(`click`, function() { fetchNumbers[index].classList.add(`unselected`); fetchNumbers[index].classList.remove(`selected`); fetchNumbers = document.querySelectorAll(`.cardnumber`) return fetchNumbers; }); } }Gracias de antemano
¿Has probado a usar el método toggle() ? Creo que podría ser lo que estás buscando.
¡Dale un tiro!
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class
Otro ejemplo que puede ser útil.
Creé una aplicación Asp.NET Core para probar/depurar su código con una página html nueva y javascript con su fragmento de código.
Si este bloque de código a continuación es el único código en su archivo Javascript,
let fetchNumbers = document.querySelectorAll(`.cardnumber`); for (let index = 0; index < fetchNumbers.length; index++) { if (fetchNumbers[index].classList.contains('unselected') === true) { fetchNumbers[index].addEventListener(`click`, function () { fetchNumbers[index].classList.add(`selected`); fetchNumbers[index].classList.remove(`unselected`); fetchNumbers = document.querySelectorAll(`.cardnumber`); return fetchNumbers; }); } else { fetchNumbers[index].addEventListener(`click`, function () { fetchNumbers[index].classList.add(`unselected`); fetchNumbers[index].classList.remove(`selected`); fetchNumbers = document.querySelectorAll(`.cardnumber`) return fetchNumbers; }); }Información
Los archivos Javascript se cargan de forma estática, lo que significa que se ejecutan inmediatamente después de cargar la página html en el DOM, por lo que este código se ejecuta inmediatamente después de cargar la página html.
Problema
Según las clases definidas por sus elementos html (en este caso, class="cardnumber unselected" ), una vez que se carga la página, su bloque de código anterior presionará la primera instrucción if , luego asignará el click event a todos cardnumber y luego procederá. para cambiar la clase de unselected a selected . Cuando vaya a hacer clic en su elemento html por segunda vez, el evento de clic del bloque if en su bloque if/else NO se ejecutará ya que la página ya se ha cargado. Esto significa que el bloque else nunca se ejecutará. Esta es la razón por la que no ve ninguna funcionalidad en el segundo clic.
Nota
Los eventos de Javascript solo se pueden definir una vez, por lo que nunca podrá vincular los click events en el bloque if Y else .
Solución
Defina el click event para su número de cardnumber . Mueva su lógica if/else a su nuevo click event como se muestra a continuación:
let fetchNumbers = document.querySelectorAll('.cardNumber'); for (let index = 0; index < fetchNumbers.length; index++) { fetchNumbers[index].addEventListener('click', function () { if (fetchNumbers[index].classList.contains('unselected') === true) { fetchNumbers[index].classList.add('selected'); fetchNumbers[index].classList.remove('unselected'); fetchNumbers = document.querySelectorAll('.cardNumber'); return fetchNumbers; } else { fetchNumbers[index].classList.add('unselected'); fetchNumbers[index].classList.remove('selected'); fetchNumbers = document.querySelectorAll('.cardNumber') return fetchNumbers; } }); }