How to get the value of an attribute in Javascript

Question

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 returns card-input small-font but the function getAttribute("value") returns null. 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;
}

I added the html but it was removed from the question somehow :/ I'll try add it again. And I tried .value but it didn't work :/ — Tamara Caligari
– Tamara Caligari, Commented Jun 17, 2016 at 11:23
@TamaraCaligari Function requires a name like: function foo(){} I don't see the name in your example. — samayo
– samayo, Commented Jun 17, 2016 at 11:29
@samayo The function is to create a custom variable for Google Tag Manager and we don't use function names. See here for examples: apasters.com/blog/… — Tamara Caligari
– Tamara Caligari, Commented Jun 17, 2016 at 11:32

samayo · Accepted Answer · 2022-03-09 12:07:39Z

44

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

edited Mar 9, 2022 at 12:07

answered Jun 17, 2016 at 11:15

samayo

16.5k13 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tamara Caligari Over a year ago

.value just returns an empty string for me :/

samayo Over a year ago

@TamaraCaligari Check maybe your value is empty.

Tamara Caligari Over a year ago

In the console I get the correct response though. Not sure why it does not behave the same way in the function.

samayo Over a year ago

@TamaraCaligari I don't know about your case, but it works here jsfiddle.net/rqy9ddkj

gurvinder372 · Accepted Answer · 2016-06-17 11:19:38Z

11

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")

answered Jun 17, 2016 at 11:19

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

Tamara Caligari Over a year ago

As I mentioned in the other comment, element.value returns an empty string for me :/ Any ideas why?

Hardik Vaghani · Accepted Answer · 2016-07-25 06:33:32Z

-3

OR with jQuery you can get value from textbox like

var val1 = $(".class name").val();//to get value by class name
var val1 = $("#id").val();//to get value by id

Both will do same.

Regards

edited Jul 25, 2016 at 6:33

answered Jun 17, 2016 at 11:17

Hardik Vaghani

2,18330 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to get the value of an attribute in Javascript

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Linked

Related