How do I call alert window by click on list item element?

Question

Could anyone please assist me with my simple script? I have a list of colors in html code and just need to make my js code to popup an alert with the clicked list item value. Please help me: Here is what I have:

HTML

<ul id="mylist">
  <li>White </li>
  <li>Silver </li>
  <li>Dark Gray</li>
  <li>Khaki </li>
</ul>

And here is JS code (it is displaying an alert with the list item value on window load but i need it to show up after clicking on each item)

<script language="JavaScript">
<!--
  var a = document.getElementById('mylist').document.getElementsByTagName('li');
  var b=[];
  for(i=0;i<a.length;i++)
  {
    b=a[i].innerText;
    alert(b);
  } 
//-->
</script>

Answer 1

document.getElementById('mylist').addEventListener('click', function(event) {
  if ('LI' != event.target.tagName) return;
  alert(event.target.innerText);
}, false);

See also:

• https://developer.mozilla.org/en/DOM/event.target
• https://developer.mozilla.org/en/DOM/element.addEventListener

Answer 2

var a = document.getElementById('mylist').getElementsByTagName('li');

for(var i = 0; i < a.length; i++){
      a[i].onclick = function(){
            alert(this.innerHTML);
      }
}

Demo: http://jsbin.com/ayefap/2/

Answer 3

 $(document).ready(function() { $("button").click(function() { $("li").each(function() { alert($(this).text()); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>MILK</li> <li>CHOCOLATE</li> <li>BREAD</li> </ul> <button>Click to Alert</button>

Answer 4

var a = document.getElementById('mylist').getElementsByTagName('li');

document.getElementById("myList") doesn't have a .document

If you use firebug or chrome console you'll get this error there.

Answer 5

Without getting into hooking up click handlers in raw JavaScript, you can do this:

<li><a href="javascript://" onclick="alertMe(this)">White</a></li>

JS:

function alertMe(element) {
      alert(element.innerText)
}

Answer 6

<ul id="mylist">

    <li><a href="javascript:void(0)" onclick="clickMe(this)">White</a></li>
        <li>Silver </li>
            <li>Dark Gray</li>
                <li>Khaki </li>
</ul>

Add this to your head section:

<script type="text/javascript">
function clickMe(cid){
alert(cid.innerHTML);

}
</script>