JavaScript Element.value vs Element.getAttribute("value")

Question

I've started learning JavaScript recently but there's something that I'm confused with :

what is the different between Element.value and Element.getAttribute("value") ?

actually my problem is , when I try to copy the value of an input element with type of text to another one , if I use the first method (Element.value) It works fine but if I go with the second method It copies the first value given to the element and It never gets updated when I change the text inside the textbox , this behavior seems odd to me ! can you guys please explain what's going on here ?

<html>
<head>
    <meta charset="utf-8">
    <title>Hello JavaScript</title>
    <script src="script2.js"></script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="button" />
    <input id="Text2" type="text" />
</body>
</html>

The JavaScript file :

var myButton;

window.onload = function () {

    myButton = document.getElementById("Button1");
    myButton.onclick = function () {
        var val = document.getElementById("Text1").getAttribute("value");  
        //var val = document.getElementById("Text1").value;
        document.getElementById("Text2").setAttribute("value", val);
    };

};

score 11 · Accepted Answer · answered Jul 05 '13 at 17:52

11

The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.

While getAttribute('value') will still show the original value="whateverWasHere" value.

jsFiddle DEMO

answered Jul 05 '13 at 17:52

Naveen Kumar Alone

7,536
5
36
57

For more details http://stackoverflow.com/questions/11973678/difference-between-element-value-and-element-getattributevalue – Naveen Kumar Alone Jul 05 '13 at 17:52

score 2 · Answer 2 · answered Jul 05 '13 at 17:51

The value attribute's value is what you set when you write the HTML.

This attribute's value, when read, is used to fill the element's value property.

That property is what you get afterwards when you use Element.value and that's what changed by the user or most JavaScript functions. The attribute isn't changed when the user changes the value through the interface.

In short, you almost always want to use Element.value and almost never Element.getAttribute("value").

JavaScript Element.value vs Element.getAttribute("value")

2 Answers2

Linked