How to update an html input field using the DOM?

Question

How do I update an html input field using the DOM? Here's what I've tried using the getElementsByClassName method:

<input type="number" class="price_input price_input_now" placeholder="Price in USD">

<script>
function myFunction() {

    document.getElementsByClassName("price_input price_input_now").setAttribute = "Some text";

    console.log("btn clicked");
}
</script>

click

The function is getting called - the console.log("btn clicked") is working. I tried .innerHTML, .innerText, and .setAttribute so far.

thanks!!

Getelementsbyclassname gives you an array of matching elements. Second, you can access the HTML value attribute using 'value'. — Romeo Sierra
– Romeo Sierra, Commented Jun 14, 2018 at 18:39
I see the real issue here is the mismatch of types. You can't set an input type="number" to some text. Are you trying to change the placeholder? If that is the case then use Nandita's solution, perhaps with the substitution of getElementById — gview
– gview, Commented Jun 14, 2018 at 18:53

gview · Accepted Answer · 2018-06-14 18:54:55Z

An attribute is a value associated with a tag, for example with the anchor tag which is really <a> but has the attribute href=. What you are looking for is the value.

In this case your code will be much simpler if the input has an id.

What I see in this case is that you have a number input. You can't set a number input to be text.

<input type="number" id="price_input" class="price_input price_input_now" placeholder="Price in USD">

For example:

document.getElementById("price_input").value = 100;

Snippet:

  function myFunction() {

    document.getElementById("price_input").value = 100;
    console.log("btn clicked");
  }

<input type="number" id="price_input" class="price_input price_input_now" placeholder="Price in USD">
<button onclick="myFunction()">button</button>

If you want to change the placeholder text, which is just an overlay and not actually a value, then you can set the placeholder, which IS an attribute of the input tag.

document.getElementById("price_input").setAttribute("placeholder", "Some text");

Nandita Sharma · Accepted Answer · 2018-06-14 18:38:56Z

1

You need to change the placeholder attribute like as shown below:

document.getElementsByClassName("price_input price_input_now")[0].setAttribute("placeholder", "Some text");

Also document.getElementsByClassName returns an array of elements so you need to select an index from that array.

<input type="number" class="price_input price_input_now" placeholder="Price in USD">
<button onclick="myFunction()">button</button>
<script>
  function myFunction() {

    document.getElementsByClassName("price_input price_input_now")[0].setAttribute("placeholder", "Some text");

    console.log("btn clicked");
  }
</script>

answered Jun 14, 2018 at 18:38

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

Comments

Andrew Ymaz · Accepted Answer · 2018-06-14 18:58:16Z

I would like to put your attention on the following things:

You are using input type="number", which means that input will only accept Numbers, not Strings (e.g. plain text), so in your example "Some text" will not allowed to be set into input type="number".
getElementsByClassName method returns collection of elements, not a single element. Since it's collection, you will be access to particular element via index property.
Input has a property value which you could override with your value.

In total, the following code should do the thing:

document.getElementsByClassName("price_input price_input_now")[0].value = 5;

(please make note, that I've accessed to the [0] element of collection, which getElementsByClassName returns).

If you would like to put "Some text" value into your imput, you will need to change your input type to text.

Collectives™ on Stack Overflow

How to update an html input field using the DOM?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related