How to get value of a div using javascript

Question

This is my div:

<div id="demo" align="center"  value="1">
    <h3>By Color</h3>
    <input type="radio" name="group1" id="color1" value="#990000"  onClick="changeColor()"/><label for="color1">Red</label>
    <input type="radio" name="group1" id="color2" value="#009900" onClick="changeColor()"/><label for="color2">Green</label>
    <input type="radio" name="group1" id="color3" value="#FFFF00" onClick="changeColor()" /><label for="color3">Yellow</label><br><br><br>
</div>

I want the value attribute of that div (value="1").

I am trying like this:

function overlay()
{
    var cookieValue = document.getElementById("demo").value;    
    alert(cookieValue);
}

but it is showing "Undefined" how to get value 1 using javascript please suggest any solution,.

"Value of a div" ?? May be there's a better way of doing what you want.. — UltraInstinct
– UltraInstinct, Commented Jun 28, 2012 at 5:28

JAAulde · Accepted Answer · 2016-11-04 12:54:15Z

41

DIVs do not have a value property.

Technically, according to the DTDs, they shouldn't have a value attribute either, but generally you'll want to use .getAttribute() in this case:

function overlay()
{
    var cookieValue = document.getElementById('demo').getAttribute('value');
    alert(cookieValue);
}

edited Nov 4, 2016 at 12:54

answered Jun 28, 2012 at 5:32

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

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

5 Comments

DhruvPathak Over a year ago

I am afraid this might be troublesome with some version of IEs ? stackoverflow.com/questions/531508/…

JAAulde Over a year ago

@DhruvPathak I won't argue over whether odd versions of IE might struggle with this--odd versions of IE seem to struggle with everything. The link you posted, however, is not related to the topic at hand. That link refers to IE's proper referencing of the class attr as className. If you're the one who downvoted me, I really don't understand why.

srinu Over a year ago

Sorry yar i just want to give + but unfortunately i clicked on down arrow I want to change but it is not moving

Mahi Over a year ago

@JAAulde your fiddle is broken

JAAulde Over a year ago

@Mahi Thanks, I've removed the link

Guidhouse · Accepted Answer · 2012-06-28 05:34:33Z

28

To put it short 'value' is not an valid attribute of div. So it's absolutely correct to return undefined.

What you could do was something in the line of using one of the HTML5 attributes 'data-*'

<div id="demo" align="center"  data-value="1">

And the script would be:

var val = document.getElementById('demo').getAttribute('data-value');

This should work in most modern browsers Just remember to put your doctype as <!DOCTYPE html> to get it valid

edited Jun 28, 2012 at 5:34

answered Jun 28, 2012 at 5:29

Guidhouse

1,43611 silver badges18 bronze badges

Comments

UltraInstinct · Accepted Answer · 2012-06-28 05:32:32Z

5

As I said in the comments, a <div> element does not have a value attribute. Although (very) bad, it can be accessed as:

console.log(document.getElementById('demo').getAttribute);

I suggest using HTML5 data-* attributes rather. Something like this:

<div id="demo" data-myValue="1">...</div>

in which case you could access it using:

element.getAttribute('data-myValue');
//Or using jQuery:
$('#demo').data('myValue');

answered Jun 28, 2012 at 5:32

UltraInstinct

44.6k12 gold badges85 silver badges108 bronze badges

Comments

csupnig · Accepted Answer · 2012-06-28 05:34:01Z

3

First of all

<div id="demo" align="center"  value="1"></div>

that is not valid HTML. Read up on custom data attributes or use the following instead:

<div id="demo" align="center" data-value="1"></div>

Since "data-value" is an attribute, you have to use the getAttribute function to retrieve its value.

var cookieValue = document.getElementById("demo").getAttribute("data-value");

answered Jun 28, 2012 at 5:34

csupnig

3,3871 gold badge26 silver badges22 bronze badges

1 Comment

JAAulde Over a year ago

I'm sure you're well aware, but for the OPs sake I'll make it clear that data-value is only valid with an HTML 5 DOCTYPE. Without it, data-value and value are equally invalid. Furthermore, if one is running a customized DOCTYPE, value could be a valid attribute. The latter comment is a stretch, I admit. :)

Wouter Dorgelo · Accepted Answer · 2012-07-16 18:45:45Z

2

You can try this:

var theValue = document.getElementById("demo").getAttribute("value");

edited Jul 16, 2012 at 18:45

Wouter Dorgelo

12.1k12 gold badges67 silver badges80 bronze badges

answered Jun 28, 2012 at 5:30

bart s

5,1202 gold badges38 silver badges58 bronze badges

Comments

madhairsilence · Accepted Answer · 2012-06-28 05:29:11Z

0

Value is not a valid attribute of DIV

try this

var divElement = document.getElementById('demo');
alert( divElement .getAttribute('value'));

answered Jun 28, 2012 at 5:29

madhairsilence

3,8904 gold badges41 silver badges83 bronze badges

Comments

Ruslan Kazakov · Accepted Answer · 2022-11-30 06:41:54Z

0

div element:

<div tabindex="0" role="button" id="state_field">CA</div>

call .innerHTML to get value 'CA'

document.getElementById("state_field").innerHTML

answered Nov 30, 2022 at 6:41

Ruslan Kazakov

5915 silver badges5 bronze badges

Comments

Shubham Verma · Accepted Answer · 2023-05-08 15:22:01Z

0

To fetch the value of the div, you can use innerHTML.

You can try this:

function overlay()
{
    var cookieValue = document.getElementById("color1").innerHTML;    
    alert(cookieValue);
}

answered May 8, 2023 at 15:22

Shubham Verma

10.2k8 gold badges70 silver badges87 bronze badges

Comments

paliz · Accepted Answer · 2023-05-08 15:28:47Z

0

add data-value custom attr to div element

  <div id="demo" align="center"  data-value="1">
<h3>By Color</h3>
<input type="radio" name="group1" id="color1" value="#990000"  onClick="changeColor()"/><label for="color1">Red</label>
<input type="radio" name="group1" id="color2" value="#009900" onClick="changeColor()"/><label for="color2">Green</label>
<input type="radio" name="group1" id="color3" value="#FFFF00" onClick="changeColor()" /><label for="color3">Yellow</label><br><br><br>

then use this code for function which try get data-value

var cookieValue = document.getElementById("demo").getAttribute('data-value');

answered May 8, 2023 at 15:28

paliz

3632 silver badges5 bronze badges

Comments

Pratap Raju · Accepted Answer · 2023-08-31 09:17:14Z

0

<!-- get text from a div -->

function get_invoice_details(){
    var get_prod_code = document.getElementById('product_code').textContent
    console.log('get_prod_code ::',get_prod_code)
}
get_invoice_details()

edited Aug 31, 2023 at 9:17

answered Aug 31, 2023 at 9:16

Pratap Raju

13 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

DarkBee · Accepted Answer · 2024-09-13 05:36:25Z

0

You can use the dataset attribute:

const anything = document.querySelector('.anything');
const value1 = anything.dataset.whatever;

console.log(value1);

<div class='anything' data-whatever='whatever value'>value</div>

edited Sep 13, 2024 at 5:36

DarkBee

14.5k9 gold badges83 silver badges132 bronze badges

answered Sep 13, 2024 at 5:25

lbeginnerbro

11 bronze badge

Collectives™ on Stack Overflow

How to get value of a div using javascript

11 Answers 11

5 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

5 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related