How to get the value of an attribute in Javascript
Solution 1
Node values and Element Attributes are different parts of an html tag.
So, you have to use element.value
instead.
This is a an example, to show you how you can fetch value
, data
, attribute
from an input field.
The HTML input field.
<input type="text" id="profile" data-nationality="Eritrean" value="Simon">
and the javascript.
var el = document.getElementById("profile");
console.log(el.value) // Simon
console.log(el.getAttribute("id")) // profile
console.log(el.dataset.nationality) // Eritrean
Solution 2
element.getAttribute("value")
returns value which was set in the markup, which is not necessarily same as element.value
.
Also, value attribute of an element is only synchronized one way - from markup to the object and vice versa doesn't happen.
So, if you want to get the value that is set programmatically, you need to write
element.value
else, if you need to get the value which was defined in the markup as
<input value="abc">
you need to do element.getAttribute("value")
Tamara Caligari
Updated on July 25, 2022Comments
-
Tamara Caligari almost 2 years
I have this input line which I am trying to extract the text of the value attribute:
<input type="text" class="card-input small-font" ng-value="paymentVia.typeDisplay" readonly="" value="Credit card">
The function
getAttribute("class")
works fine and it returnscard-input small-font
but the functiongetAttribute("value")
returnsnull
. I tried .value as well but this returns an empty string.Does anyone know why this is happening?
This is my JS:
function() { var x = document.getElementsByClassName("card-input small-font"); var payment =x[18].value; return payment; }
-
Tamara Caligari about 8 years.value just returns an empty string for me :/
-
Tamara Caligari about 8 yearsAs I mentioned in the other comment, element.value returns an empty string for me :/ Any ideas why?
-
samayo about 8 years@TamaraCaligari Check maybe your
value
is empty. -
Tamara Caligari about 8 yearsIn the console I get the correct response though. Not sure why it does not behave the same way in the function.
-
samayo about 8 years@TamaraCaligari I don't know about your case, but it works here jsfiddle.net/rqy9ddkj