Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>data on divs</title>
<style>
  body { font-family: sans-serif; }
</style>
</head>
<body>
  <div>first</div>
  <div>second</div>
  <p>click the above divs, and look at the console.log output</p>
  <script>
    // also include json2.js for IE7 and below support
  </script>
</body>
</html>
 
function setData(el, data) {
  el.setAttribute('data-stuff', JSON.stringify(data));
}
function getData(el) {
  return JSON.parse(el.getAttribute('data-stuff'));
}
function showData() {
  console.log( getData(this) );
}
// set the initial data (could also be delivered in the initial markup
var divs = document.getElementsByTagName('div'),
    i = divs.length;
setData(divs[0], '3');
setData(divs[1], [1,2,3]);
divs[0].addEventListener('click', showData, false);
divs[1].addEventListener('click', showData, false);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers