¿Cómo puedo evitar agregar más clases error mientras alguien hace clic repetidamente en el botón Enviar? En Chrome Dev Tools, veo que se siguen agregando más y más si envía spam al botón. No sé cómo prevenir esto.
function errorFunc(req, message) { const formControl = req.parentElement; const span = formControl.querySelector('span'); span.innerText = message; req.className += 'error'; span.className += 'error-text'; if(req !== email) { req.value = ' '; } else { req.style.color = "hsl(0, 100%, 74%)"; } } function successFunc(req) { req.className += 'success'; }Puede usar element.classList.add() que no crea duplicados.
const x = document.querySelector('.x'); x.classList.add('error'); console.log(x.className); x.classList.add('error'); console.log(x.className); <div class="x"></div>ClassList es DOMTokenList y como dice la documentación de MDN :
Los métodos que modifican DOMTokenList (como DOMTokenList.add()) recortan automáticamente cualquier exceso de espacio en blanco y eliminan los valores duplicados de la lista.
se puede hacer con el uso simple de js classList interno de un elemento
/** @type {HTMLElement} */ let req = document.querySelector('.x'); req.classList.add('error') esto no agrega la clase de error si ya existe. y es más fácil eliminar la clase de error si ya no se necesita req.classList.remove('error') (solo se elimina si la clase está presente).
también puede verificar si la clase que desea agregar ya existe
req.classList.has('error');aquí está el manual