How can I prevent adding duplicate classes to an HTML element?

Question

How can I prevent adding more classes error while somebody is repeatedly clicking on the submit button? In Chrome Dev Tools I see that they keep being added more and more if you spam the button. I don't know how to prevent this.

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';
}

Jax-p · Accepted Answer · 2021-12-20 14:40:01Z

7

You can use element.classList.add() which doesn't create duplicates.

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 is DOMTokenList and as the MDN documentation says:

Methods that modify the DOMTokenList (such as DOMTokenList.add()) automatically trim any excess Whitespace and remove duplicate values from the list.

edited Dec 20, 2021 at 14:40

answered Dec 20, 2021 at 14:23

Jax-p

8,8246 gold badges35 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ElTi-42 · Accepted Answer · 2021-12-20 14:28:53Z

0

can be done with simple use js internal classList of a element

/** @type {HTMLElement} */
let req = document.querySelector('.x');
req.classList.add('error')

this does not add the error class if it allready exists. and it's easier to remove the error class if not longer needed req.classList.remove('error') (only removes if class is present).

also you can check if the class you want to add already is existing

req.classList.has('error');

here is the manual

HTMLElement classList

answered Dec 20, 2021 at 14:28

ElTi-42

1038 bronze badges

Collectives™ on Stack Overflow

How can I prevent adding duplicate classes to an HTML element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related