Using data-* with javascript [duplicate]

Question

I am learning javascript and trying to store the value 2 in data-value in img element, and when I press the image I want to use javascript to show that value(2) in a paragraph. Here's my code:

<!DOCTYPE html>
<html>
<head>
<script>
 function ispisi() {
    var x = document.getElementById("myimage").data-value;
    document.getElementById('demo').innerHTML = x;
 }
</script>
</head>

<body>

<img id="myimage" data-value="2" onclick="ispisi()" src="bulboff.gif" width="100" height="180" />

<p id="demo">Text here<p>

</body>
</html>

The value should show in paragraph p, but when I click the image "text here" stays, insted. Why is this code not working?

dashes are not legal in variable names, data-value means data minus value — Sergey
– Sergey, Commented Nov 10, 2014 at 2:17

Sergey · Accepted Answer · 2014-11-10 02:18:31Z

2

try this

var x = document.getElementById("myimage").dataset.value;

OR

var x = document.getElementById("myimage").getAttribute("data-value");

answered Nov 10, 2014 at 2:18

Sergey

4942 silver badges6 bronze badges

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

Comments

wjohnsto · Accepted Answer · 2014-11-10 02:22:30Z

0

The proper way to do this would be as follows:

function ispisi() {
    var x = document.getElementById("myimage").getAttribute('data-value');
    document.getElementById('demo').innerHTML = x;
}

window.onload = function() {
    document.getElementById('myimage').onclick = ispisi;
};

answered Nov 10, 2014 at 2:22

wjohnsto

4,5032 gold badges16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using data-* with javascript [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related