Unexpected reference to variable in anonymous function

Question

The following JavaScript has some unwanted behaviour:

<html>
<script>
  function AddEventListener(el, listener)
  {
    el.addEventListener ? el.addEventListener('click', listener) : 
                          el.attachEvent('onclick', listener);
  }

  function Init(parent) 
  {
    var span = document.createElement("span");
    span.innerText = "Span1";

    AddEventListener(span, function() { alert(span.innerText); } ); 
    parent.appendChild(span);
    var span = document.createElement("span");

    span.innerText = "Span2";
    parent.appendChild(span);
  }
</script>
<body onload="Init(document.getElementById('drop'));">
  <div id='drop'></div>
</body>
</html>

If you click on Span1, Span2 is shown in the alert window. I understand why: javascript variable scope. But I don't know how to solve it.

Some context: I used this.innerHTML which works fine except in IE8. this points to the window in IE8, not to the parent of the event listener.

dvir · Accepted Answer · 2012-06-14 17:40:12Z

2

Instead of using a global variable in your click callback, you can use the event parameter that is being passed to every event you register, and then use its event.target parameter to get the DOM element that participated in the event.

For that, you may change your event listener registering to: AddEventListener(span,function(event) {alert((event.target ? event.target : event.srcElement).innerText);});

I've set up an example of it using your code here: http://jsfiddle.net/dvirazulay/fTa6T/1/

edited Jun 14, 2012 at 17:40

answered Jun 14, 2012 at 17:13

dvir

5,1241 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tin Over a year ago

Yes, that's indeed a good one. A minor extension will make it work on IE8 too: AddEventListener(span,function() {alert((event.target?event.target:event.srcElement).innerText);});

user1106925 Over a year ago

This won't work in IE8, and in cases where there are nested elements, the .target could be one of those instead of the element to which the handler is bound.

dvir Over a year ago

@Tin: added in the answer to support IE8

FishBasketGordo · Accepted Answer · 2012-06-14 17:15:46Z

2

You can return a function instead of just declaring one, but I like @Dvir Azulay suggestion better:

function CreateAlert(span)
{
    return function() { alert(span.InnerText); };
}

function Init(parent) 
{
    var span=document.createElement("span");
    span.innerText="Span1";
    AddEventListener(span, CreateAlert(span)); 
    parent.appendChild(span);
    var span=document.createElement("span");
    span.innerText="Span2";
    parent.appendChild(span);
}

answered Jun 14, 2012 at 17:15

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Comments

Jay Sullivan · Accepted Answer · 2012-06-14 17:13:49Z

0

Try this: (changed the second definition of span to span2)

<!DOCTYPE html>
<html>
<script>

function AddEventListener(el,listener)
{
  el.addEventListener ? el.addEventListener('click', listener) :     el.attachEvent('onclick', listener);
}

function Init(parent) 
{
 var span=document.createElement("span");
 span.innerText="Span1";
 AddEventListener(span,function() {alert(span.innerText);}); 
 parent.appendChild(span);
 var span2=document.createElement("span");
 span2.innerText="Span2";
 parent.appendChild(span2);
}
</script>
<body onload="Init(document.getElementById('drop'));">
<div id='drop'></div>
</body>
</html>

answered Jun 14, 2012 at 17:13

Jay Sullivan

18.4k11 gold badges67 silver badges89 bronze badges

1 Comment

Tin Over a year ago

I know this will work but then I have to ensure all variables used have a unique name in the whole scope. In this simplified example it would be feasible...

Collectives™ on Stack Overflow

Unexpected reference to variable in anonymous function

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related