How to add class in input type text using Javascript?

Question

I want to add a class with input tags Because there is a problem with my display (it not beautiful) And I have to Add this class by using javascript and my code is as follows But it doesn't work I'm not sure where I went wrong.

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>

Which I added classes browser-default and other existing classes must work correctly.

What should I do?

Thanks

What is `Choices` ? Please post a [mcve], noting input and expected output using the `[<>]` snippet editor. "It doesn't work" is also not a great description of a problem — mplungjan, Jun 09 '20 at 05:48
@mplungjan Ah, I actually wrote code this way. I created the model.form . It must use {% csrf_token%} and I appreciate your effort in helping me. Thank you. — hanizo, Jun 09 '20 at 06:29
But the point is that we cannot tell if the solution to your question is THE solution. Perhaps you have a fundamental issue that is better solved another way. If you posted the HTML and your Choices function, perhaps we have a solution that does not involve adding a class to all text fields. After we solve it, you apply it to the CSRF or just paste the JavaScript and it will work on the CSRF generated HTML — mplungjan, Jun 09 '20 at 06:34

mplungjan · Answer 1 · 2021-11-09T04:50:33.843

0

X/Y problem "there is a problem with my display" - explain the problem instead of trying to fix a solution that might not be efficient or good practice. Also what is Choices ?

To answer your immediate question:

You are trying to add a class to a node list. That is jQuery syntax. In vanilla JS, you need to use classList.add to each

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

or similar loop

edited Nov 09 '21 at 04:50

answered Jun 09 '20 at 05:51

mplungjan

169,008
28
173
236

@hanizo I also fixed your typo. It is also add and not addClass – mplungjan Jun 09 '20 at 06:03
how is it suppose to work? like what is [...? – Maduro Nov 08 '21 at 21:14
It is casting an html collection to array. You can leave it out if you don’t care about older Edge browsers – mplungjan Nov 09 '21 at 04:49
This is one of the most commonly asked questions on SO. Please don't answer duplicates; instead, vote to close marking the duplicate. https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return – connexo Nov 09 '21 at 05:37
@connexo this is a year and a half old... There are thousands of dupes – mplungjan Nov 09 '21 at 05:41
1

@connexo and btw as you can see, user Maduro found it and not the others – mplungjan Nov 09 '21 at 05:43

score 0 · Accepted Answer · answered Jun 09 '20 at 05:55

So you're really close.

The first thing to note is that document.querySelectorAll returns a NodeList (like an array of elements). So you'll need to use forEach to loop over each input.

From MDN

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

The second thing is that the classList.addClass doesn't exist. It's just classList.add. For more about Element.classList, please refer to this MDN article: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Try the following instead:

<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>

@hanizo if this solved your issue will you consider marking it as the correct answer? — Justin Taddei, Jun 09 '20 at 06:11
This is one of the most commonly asked questions on SO. Please don't answer duplicates; instead, vote to close marking the duplicate. https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — connexo, Nov 09 '21 at 05:35

How to add class in input type text using Javascript?

2 Answers2