Как получить значение div с помощью javascript

Это мой 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>

Мне нужен атрибут value этого div (value = "1" ).

Я пробую вот так:

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

но он показывает "Undefined", как получить значение 1 с помощью javascript, предложите любое решение,

Ответ 1

DIV не имеют свойства value.

Технически, согласно DTD, они не должны иметь атрибут value, но обычно вы хотите использовать .getAttribute() в этом случае:

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

Ответ 2

Короче говоря, значение "value" не является допустимым атрибутом div. Поэтому абсолютно правильно возвращать undefined.

Что вы могли бы сделать, это что-то в строке использования одной из данных атрибутов HTML5 - * '

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

И script будет:

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

Это должно работать в большинстве современных браузеров Не забудьте поставить ваш doctype как <!DOCTYPE html>, чтобы он был достоверным

Ответ 3

Как я уже сказал в комментариях, элемент <div> не имеет атрибута value. Хотя (очень) плохо, к нему можно получить доступ:

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

Я предлагаю использовать атрибуты HTML5 data-*. Что-то вроде этого:

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

в этом случае вы можете получить к нему доступ, используя:

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

Ответ 4

Прежде всего

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

который не является действительным HTML. Прочитайте атрибуты пользовательских данных или используйте вместо них следующее:

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

Так как "data-value" является атрибутом, вы должны использовать функцию getAttribute, чтобы получить его значение.

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

Ответ 5

Вы можете попробовать следующее:

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

Ответ 6

Значение не является допустимым атрибутом DIV

попробуйте это

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