0

OK, the code is available on : http://jsfiddle.net/35zjxrax/2/

My question is at line 24 of the js. I have an object of class Person that has proprieties and prototype methods. One of these methods returns a button that should to something with information from the button... but I can't seem to access the button. Any ideeas?

Here is the Class : 

var Person = function(nom, age, img) {
  this.nom = nom;
  this.age = age;
  this.img = img;
  this.toString = function() {
    return this.nom + " - " + this.age;
  };
};


Person.prototype.getName = function() {
  var s = document.createElement('span');
  s.className = "spanNom";
  s.appendChild(document.createTextNode(this.nom));
  return s;
};
Person.prototype.getImage = function() {
  var im = document.createElement('img');
  im.src = this.img; //this -- is the Person obj
  im.className = "monImage";
  im.onclick = function() {
    console.log(this); //this -- is the image element...
    /*
    how can I access the object proprieties from an anonymous event listener
    */
  };
  return im;
};
Person.prototype.getButton = function() {
  var d = document.createElement('div');
  var b = document.createElement('input');
  b.type = "button";
  b.className = "butPers";
  b.value = this.toString();
  b.addEventListener('click', function() {
    console.log(this);
    /* this is the button */
    /* I need it to be the PersonObject */
  });
  d.appendChild(b);
  return d;
};

Person.prototype.showPerson = function() {
  var d = document.createElement('div');
  d.appendChild(this.getName());
  d.appendChild(this.getImage());
  d.appendChild(this.getButton());
  d.className = "divPerson";
  return d;
};



var data = [{
  "nom": "Alex",
  "age": 30,
  "img": "http://fc02.deviantart.net/fs71/i/2012/213/3/1/play_the_name_game__alex__by_sabreartworks-d59hhta.jpg"
}, {
  "nom": "Joe",
  "age": 20,
  "img": "http://logocache.com/custom-design/logo-name/Joe-designstyle-kiddo-m.png"
}, {
  "nom": "Tony",
  "age": 10,
  "img": "http://fc01.deviantart.net/fs71/f/2012/330/e/5/tony_stark___sketches_by_cloud_kira-d5m709q.jpg"
}];
var ppl = [];
//fill ppl table with Person objects
for (var i in data) {
  ppl.push(new Person(data[i].nom, data[i].age, data[i].img));
}

for (var i in ppl) {
  console.log(ppl[i].toString());
  console.log(ppl[i].getName());
  console.log(ppl[i].getImage());
}

window.onload = function() {
  var c = document.getElementById("c");
  for (var i in ppl) {
    c.appendChild(ppl[i].showPerson());
  }
};
.monImage {
  width: 150px;
  height: 150px;
  padding: 5px;
  border: solid 1px #000;
  cursor: pointer;
}
.divPerson {
  width: 250px;
  padding: 20px;
  border: solid 3px #03C;
  display: inline-block;
  margin: 5px;
  text-align: center;
}
.spanNom {
  font-size: large;
  font-weight: bold;
  margin: 10px;
  display: block;
}
<div id="c"></div>
drew7721
  • 1,622
  • 18
  • 20
  • define `var that=this;` first, then use `console.log(that);` instead of `console.log(this);` some folks use `self` instead of `that`, but `self` is actually a reserved word in browsers and workers, so i prefer `that`, and `that` also is more self-descriptive as it implies a copied `this` in js. – dandavis Mar 26 '15 at 20:41

1 Answers1

1

Use .bind like this:

im.onclick = function(event) {
    console.log(this); // 'this' is now the Person
    console.log(event.target); // event.target will give you the <img> tag
}.bind(this); // .bind ensures the anon func is called with Person as 'this'

Demo, for the image -- http://jsfiddle.net/35zjxrax/4/

Docs and shim info here -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

sifriday
  • 4,342
  • 1
  • 13
  • 24