8

This is a follow up question from my last question.

Simple javascript prototype issue

I am a bit new using JavaScript prototype so sorry for the second post.

I want to assign the clicked element id to the this.name array.

task.prototype.init=function(){  
      this.name=[];  //this.name array has to be defined here

        for (var i; i<5; i++){
            var Link=document.createElement('a');
                Link.innerHTML='click';
                Link.id=value[i];   //I want to assign the value to the this.name array
                Link.href='#'
                Link.onclick=this.changeName;
                document.body.appendChild(Link);
         }
}
task.prototype.changeName=function(){  

     //How do I push the this.id to the property this.name?

     //the code below won't work because this refer to the <a> element. 
     this.name.push(this.id);     

    return false;
    }

Any tips for the task?

Community
  • 1
  • 1
FlyingCat
  • 14,036
  • 36
  • 119
  • 198
  • 2
    Don't use CapitalCase for regular variables. – katspaugh Dec 21 '12 at 20:36
  • Possible duplicate of [JavaScript Callback Scope](http://stackoverflow.com/questions/183214/javascript-callback-scope) and [addEventListener and the scope of this](http://stackoverflow.com/questions/1803195/addeventlistener-and-the-scope-of-this) and many others. – katspaugh Dec 21 '12 at 20:41
  • 1
    I think 'name' is actually reserved as well.`callee: function () { arguments: null caller: null length: 0 name: ""` – Joe Dec 21 '12 at 20:41
  • Here's an example without using name: http://jsfiddle.net/kThM2/4/ – Joe Dec 21 '12 at 20:43

2 Answers2

15

Your prototype is okay, the problem is that this on event handlers is always the element that caused the event to be triggered. In JavaScript, the value of this inside a function depends on how the function is called.

If you want this to be bound to a certain value, you can create a bound function with Function.prototype.bind:

var newChangeName = this.changeName.bind(this);
Link.onclick = newChangeName;

Note however that bind is IE9+ only. A workaround would be:

var that = this;
Link.onclick = function() {
    that.changeName();
};

(Style note: I'd use link instead of Link; the convention in js is to leave uppercase initials to constructors).

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
1

Use bind to set the desired this for the changeName callback:

Link.onclick=this.changeName.bind(this);
JohnnyHK
  • 305,182
  • 66
  • 621
  • 471