Why this mouseover script doesn't work properly?

Question

I have written this script:

var elms = document.getElementsByTagName('li');

for (var i = 0; i < elms.length; i++){
  if (elms[i].className == 'liitem'){
  var delete_id = elms[i].id;
  elms[i].onmouseover = function(){  
    document.getElementById("delete-" + delete_id).style.display = "block";
    }
  elms[i].onmouseout =  function(){  
    document.getElementById("delete-" + delete_id).style.display = "none";
    }
   }
}​

HTML:

<li class="liitem" id="205">
    <span>
        <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">One:</a> </span>
    <br>
    <ul><li>
        <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-205" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul>
</li><br>

<li class="liitem" id="204">
    <span>
        <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">Two:</a> </span>
    <br>
    <ul><li>
        <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-204" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul>
</li><br>

<li class="liitem" id="203">
    <span>
        <a href="http://www.google.com/finance/portfolio?action=view&pid=1" target="_blank">Three:</a> </span>
    <br>
    <ul><li>
        <span><a href="http://www.google.com" target="_blank">www.google.com</a> </span><span id="delete-203" style="float:right;font-size:11px;display:none;"><a href="">delete</a></span></li></ul>
</li><br>
​

Live demo: http://jsfiddle.net/5FBjm/1/

but it doesn't work properly. I want that when there is mouseover on a certain <li> element of "liitem" class, then show "delete" link of that element (with the same ID).

In my script instead, appear only the last "delete". Why?

Answer 1

使用this.id替换delete_id使用： http : //jsfiddle.net/5FBjm/4/

Answer 2

You have a variable scope problem - in the callbacks delete_id always has the last value assigned, not the value it had when the callback was registered.

Do a Google search for "javascript loop scope callback" for hundreds of examples (many of them here) on how to fix it.

---

EDIT - as @gabitzish points out, you can just use this.id

This only works because the browser passes the current element as this to the callback.

Since the loop variable you need is actually that element's id , you can just use it directly and not worry about the loop scope problem. The answer above would apply if it been some other variable which isn't a property of the element.