Hack #20: Using a JavaScript Delegate with Stored Custom Data

1.9.html

    <div class="container">

      <h1>Choose Your weapon</h1>
      <p>Click on one of the selections below to find out more info about your character:</p>
      
      <ul id="myList">
        <li data-discription="Most powerful goblin in entire kingdom" >Ludo</li>
        <li data-discription="Ruler over all goblins big and small" >Jareth the Gobblin King</li>
        <li data-discription="Only person who can put a stop to the Goblin King" >Sarah</li>
        <li data-discription="Unsung hero of the goblin kingdom" >Hoggle</li>
      </ul>
     <p id="displayTarg" class="well"></p>
    </div> <!-- /container -->

1.9.js

  var mainElement = document.getElementById('myList');
    var discriptionTarget = document.getElementById('displayTarg');
    
    mainElement.addEventListener('click', function(e){
        
        var discription = e.target.getAttribute('data-discription'); //remember we use getAttribute instead of dataset.discription due to its backwards compatability
        
        discriptionTarget.innerHTML = discription;
        
        
        });