JSFiddle - React, Tailwind, and code Playground

by vasi_32

HTML

<div class="showDiv">Show data: </div>

<div class="outerDiv">
  <ul class="idiv">
     <li data-info="datashow"><a href="">111</a></li>
     <li data-info="dataHide"><a href="">222</a></li>
     <li data-info="dataToggle"><a href="">333</a></li>
  </ul> 
</div>

CSS

#mydiv{
  width:200px;
  height:200px;
  border:1px solid red;
}

JavaScript

(function(){
  var innerDiv = document.getElementsByClassName('showDiv')[0];
  //var li = document.querySelectorAll('ul.idiv li'); 
var li = document.getElementsByTagName('li'); 
console.log(li);
  var i =0
  for(i,len=li.length;i<len;i++){
       //console.log(i)
       var thisLi = li[i];
       thisLi.addEventListener('click',function(e){
             console.log(i)
             e.preventDefault();
             console.log(li[i].innerHTML);
             var data = thisLi.getAttribute('data-info');
             innerDiv.innerHTML = data;
       },false);
  } 
}());