13

this line of code:

document.getElementById('01').getElementsByTagName("input")[0].setAttribute("value", "1");

works perfectly fine when "input" doesn't already have a value. but when the input already has a value, it wouldn't change the value. why is that?

Trott
  • 66,479
  • 23
  • 173
  • 212
Zahra
  • 149
  • 1
  • 2
  • 12
  • 4
    have you tried .value = 1 instead of .setAttribute("value", "1") ?? – Sushil Apr 28 '15 at 21:00
  • If it were myself, I would just store the element in a var and use var.value = 1 instead of using the setAttribute method. If that's not in alignment with your overall purpose, post some of the code around your statement and we'll get you fixed up. – Fata1Err0r Apr 28 '15 at 21:01
  • After the user changes the value of the input field, the new value will be used. If you want to have your value, you must change it again, by using `onchange` event – Ovidiu Badita Apr 28 '15 at 21:10

3 Answers3

35

Sounds like you faced a confusing difference between element property value and value attribute. Those are not the same things.

The thing is that value-attribute serves the purpose of the default value, so if the element already has a property value then changing value-attribute will not be reflected in UI.

Documentation says this:

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val).

So to demonstrate this situation consider this little demo:

document.getElementById("01").getElementsByTagName("input")[0].value = 'property set';

document.getElementById("01").getElementsByTagName("input")[0].setAttribute("value", "two");
<div id="01">
    <input type="text" />
</div>

In the above snippet the value attribute is indeed updated to value two and you can verify it if you try to read it back with getAttribute('value'), however the value-property takes precedence over attribute, so later is not rendered.

dfsq
  • 191,768
  • 25
  • 236
  • 258
1

That JavaScript absolutely does change the value of the <input> tag when the tag already has a value attribute. See for yourself here: http://jsfiddle.net/qg7d4m32/

Trott
  • 66,479
  • 23
  • 173
  • 212
  • Agreed. I think his problem is that he is changing it once, then trying to change it again. In which case, depending upon how he is calling the function/event, is why it doesn't seem like it's changing. Hopefully he'll post up more code for us. – Fata1Err0r Apr 28 '15 at 21:04
  • well, i Am seeing for myself. i tried it and it didn't work. no matter what they say. – Zahra Apr 28 '15 at 21:06
  • @zahramoradi Post some of your code (the inputs, your javascript) for us so we can properly assist you. – Fata1Err0r Apr 28 '15 at 21:06
  • @Fata1Err0r no only changing it once in the code. – Zahra Apr 28 '15 at 21:07
1

for input field if you want to set a value just use value

Pure javascript:

document.getElementById('01').getElementsByTagName("input")[0].value = "value"

jQuery:

 $("input").val("value")
mohamed-ibrahim
  • 10,837
  • 4
  • 39
  • 51
  • I think he is using regular JavaScript, rather than jQuery. However, I agree with this post, learn jQuery and you'll life will be a lot easier. – Fata1Err0r Apr 28 '15 at 21:05
  • The author has requested for a javascript solution, which means that nobody _should_ force jQuery to him. Also, please note that jQuery is not relevant anymore. – KarelG Apr 28 '15 at 21:07
  • @KarelG While I agree that no one should force a jQuery solution for a simple JavaScript question, it's incredibly bold to say jQuery isn't relevant anymore... – War10ck Apr 28 '15 at 21:08
  • i work with Rails and jQuery is a deafult rails 3 ! what is meant that "jQuery is not relevant anymore" ? – mohamed-ibrahim Apr 28 '15 at 21:11