CODEWITHSUNDEEP
javascripthtml
srinu
srinu

Reputation: 451

How to get value of a div using javascript

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,.

Upvotes: 32

Views: 279867

Answers (11)

lbeginnerbro
lbeginnerbro

Reputation: 1

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>

Upvotes: 0

Pratap Raju
Pratap Raju

Reputation: 1

<!-- 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()

Upvotes: 0

paliz
paliz

Reputation: 353

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');

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 9933

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);
}

Upvotes: 0

Ruslan Kazakov
Ruslan Kazakov

Reputation: 531

div element:

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

call .innerHTML to get value 'CA'

document.getElementById("state_field").innerHTML

Upvotes: 0

JAAulde
JAAulde

Reputation: 19560

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);
}

Upvotes: 41

bart s
bart s

Reputation: 5100

You can try this:

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

Upvotes: 2

Guidhouse
Guidhouse

Reputation: 1426

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

Upvotes: 27

csupnig
csupnig

Reputation: 3377

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

Upvotes: 3

UltraInstinct
UltraInstinct

Reputation: 44444

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');

Upvotes: 5

madhairsilence
madhairsilence

Reputation: 3870

Value is not a valid attribute of DIV

try this

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

Upvotes: 0

Related Questions