Menu
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);
};
};
888
The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string); see Non-existing attributes for details.
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.
Element.setAttribute() Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value. To get the current value of an attribute, use getAttribute() ; to remove an attribute, call removeAttribute() .
The getElementById() method returns an element with a specified value. The getElementById() method returns null if the element does not exist. The getElementById() method is one of the most common methods in the HTML DOM.
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
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
