如何使用 Javascript 在输入类型文本中添加 class？

Question

我想添加一个带有输入标签的 class 因为我的显示器有问题（它不漂亮）而且我必须使用 javascript 添加这个 class 并且我的代码如下所示但我不确定我错了。

mychoices.html

<script>
  document.addEventListener('DOMContentLoaded', function() {
    new Choices('#choices-remove-button', {
        removeItemButton: true,
    });
    var inputs = document.querySelectorAll('input[type=text]');
    inputs.classList.addClass("browser-default");

});
</script>

myform.html

<div class="section">
    <form action='.' method='POST'>
        {% csrf_token %} {{ form.media }}
        {{ form }}
        <input type='submit' value='Save' class="button" />
    </form>
</div>

我添加的类 browser-default 和其他现有类必须正常工作。

我应该怎么办？

谢谢

Answer 1

X/Y 问题“我的显示器有问题” - 解释问题，而不是尝试修复可能不是有效或良好做法的解决方案。 还有什么是Choices ？

要回答您的直接问题：

您正在尝试将 class 添加到节点列表中。 那就是 jQuery 语法。 在 vanilla JS 中，您需要使用classList.add到每个

[...document.querySelectorAll('input[type=text]')].forEach(input => ;
input.classList.add("browser-default"));

或类似的循环

Answer 2

所以你真的很亲近。

首先要注意的是document.querySelectorAll返回一个NodeList （就像一个元素数组）。 因此，您需要使用forEach来遍历每个输入。

来自 MDN

Document 方法 querySelectorAll() 返回一个 static（非实时）NodeList，表示与指定选择器组匹配的文档元素列表。

第二件事是classList.addClass不存在。 这只是classList.add 。 有关Element.classList的更多信息，请参阅这篇 MDN 文章： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

请尝试以下操作：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    new Choices('#choices-remove-button', {
        removeItemButton: true,
    });
    var inputs = document.querySelectorAll('input[type=text]');
    inputs.forEach(function (input) {
        input.classList.add("browser-default");
    })

});
</script>