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?

Please don't use the "Format as code" option on the main text of your question. — Quentin, Apr 27 '12 at 12:51
Possible duplicate of [Event handlers inside a Javascript loop - need a closure?](http://stackoverflow.com/questions/341723/event-handlers-inside-a-javascript-loop-need-a-closure) — Quentin, Apr 27 '12 at 12:53
To have a glimpse at native javascript, I realize it is harder to code :) $('a').hover(function(){ var liID = $(this).parents('.liitem').attr('id'); $('#delete-'+liID).toggle(); });` — Bob, Apr 27 '12 at 13:13

score 3 · Accepted Answer · answered Apr 27 '12 at 12:53

3

Replace delete_id with this.id and it works: http://jsfiddle.net/5FBjm/4/

answered Apr 27 '12 at 12:53

gabitzish

9,535
7
44
65

good call - didn't notice myself that it was his `id` field that had the scope problem. – Alnitak Apr 27 '12 at 12:54

score 2 · Answer 2 · answered Apr 27 '12 at 12:53

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.

Why this mouseover script doesn't work properly?

2 Answers2