Getting the value of a div tag's special attribute

Question

If next command:

 console.log(document.getElementById('container'));

prints:

 <div id="container" prjid="ABCDE">...</div>

why the next command:

 console.log(document.getElementById('container').prjid);

prints undefined? I am trying to get the value of prjid

You shouldn't use nonstandard attributes. If you need to add your own data to an element, use `data-prjid`. — Barmar, Feb 03 '18 at 09:00
Possible duplicate of [How to get value of a div using javascript](https://stackoverflow.com/questions/11238508/how-to-get-value-of-a-div-using-javascript) — Ulysse BN, Feb 03 '18 at 09:17
all is working now. Why I should not use nonstandard attributes? — Jose Cabrera Zuniga, Feb 05 '18 at 00:30

score 5 · Accepted Answer · answered Feb 03 '18 at 08:58

prjid is an attribute. You should use the function getAttribute to get any attributes value.

getAttribute() 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);

 console.log(document.getElementById('container').getAttribute("prjid"));

 <div id="container" prjid="ABCDE">...</div>

Shubham Khatri · Answer 2 · 2018-02-03T09:05:04.473

In order to get prjid which isn't a defined attribute on div rather a custom one, you would use getAttribute

document.getElementById('container').getAttribute('prjid')

Snippet

console.log(document.getElementById('container').getAttribute('prjid'));

<div id="container" prjid="abd"/>

According the MDN docs:

getAttribute() 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);

Note: In React you shouldn't use document.getElementById and rather use refs. Check this answer

score 2 · Answer 3 · answered Feb 03 '18 at 08:59

In order to get prjid use getAttribute

document.getElementById('container').getAttribute('prjid');

getAttribute() 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);

Sudhakar · Answer 4 · 2018-02-03T09:05:04.210

2

Instead of doing this you can get data attribute to that like below

document.getElementsById("container").getAttribute("prjid");

edited Feb 03 '18 at 09:05

answered Feb 03 '18 at 09:01

Sudhakar

324
3
9

*set data attribute to that* ? you mean *get* ? – Suresh Atta Feb 03 '18 at 09:02

Rupal · Answer 5 · 2018-02-03T09:07:43.450

1

You can get it by getAttribute function like

console.log(document.getElementById('container').getAttribute("prjid"));

You can read about this here

edited Feb 03 '18 at 09:07

answered Feb 03 '18 at 09:01

Rupal

1,111
6
16

score 1 · Answer 6 · answered Feb 03 '18 at 09:21

if you want get an value , and that value place in an custom attribute you must use getAttribute() method , some thing like this

var pjid = document.getElementById('container').getAttribute('pjid');

and create this attribute in your element

<div id="container" pjid="some-thing" >

but i thing you are this problem in React , because you Tag reactjs , in react ( prev version - less than 16 ) , JSX delete all undefined attribute but this problem solve in react 16 , you must migrate to this version

Getting the value of a div tag's special attribute

6 Answers6

Linked

Related