如何防止向 HTML 元素添加重复的类？

Question

error当有人反复单击提交按钮时，如何防止添加更多课程？在 Chrome 开发工具中，我发现如果您向按钮发送垃圾邮件，它们会不断添加。我不知道如何防止这种情况。

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

Answer 1

您可以使用element.classList.add()它不会创建重复项。

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是DOMTokenList，正如MDN 文档所述：

修改 DOMTokenList 的方法（例如 DOMTokenList.add()）会自动修剪任何多余的空白并从列表中删除重复的值。