-1

I have an array of classes in javascript, each instance is created passing it the name of an mp3file. the idea is that each instance creates an "invisible" audio element and a div. When you click on the div you here it's audio.

This is a simplified version of the class... Every attempt I have tried to pass a pointer to the appropriate class to the "onclick" function has failed.. "this" obviously fails, the example below fails.. I have provisionally solved the problem by passing the class an "idx" and then to the div.onclick, so it "find's itself", but I am sure there is a more elegant solution of passing the div a reference to the appropriate audio element to play.

function myClass (mp3file) {
    this.aud = document.createElement('audio');
    this.aud.src = mp3file;
    this.div = document.createElement('div');
    this.div.className =  'dictDiv';     
    this.context = this;
    this.div.onclick = function () {
        context.aud.play();
    }           
}
Francesco
  • 37
  • 8

1 Answers1

1
var context = this;
 this.div.onclick = function () { 
context.aud.play();
}

Onclick overrides this, so working with this wouldnt work. You can store it in the scope (see top) or override the this binding:

 this.div.onclick=function(){
 this.div.appendChild(this.aud);
 this.aud.play();
 }.bind(this);
 document.body.appendChild(this.div);
Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • Just one thing Jonas .. the first example (with context=this) does NOT work for me! – Francesco Dec 26 '16 at 10:40
  • as I also needed to flash the div, previously using this to refer to the div itself (ilel onclick= ...
    – Francesco Dec 26 '16 at 10:47
  • this.div.onclick=function(){
    this.div.innerHTML = this.phon;
    this.div.style.backgroundColor = '#AAFFAA';
    setTimeout(function () {
    this.div.innerHTML = "?";
    this.div.style.backgroundColor = 'yellow';
    }, 3000);
    this.audio.play();

    }.bind(this)     – Francesco Dec 26 '16 at 10:47
  • ibe missed the correct declaration with **var** try the edit – Jonas Wilms Dec 26 '16 at 10:53
  • the audio elem + the div doesnt exist in your code, they just exist if you append them to the page, see edit – Jonas Wilms Dec 26 '16 at 10:57
  • Thanks, great! The var did it! – Francesco Dec 26 '16 at 12:03
  • one last doubt if I may, Jonas ... il 58 and still learning: in this Particular case, what's the difference between putting the "var" or leaving it out? there is no previous "context" variable so what's the difference? – Francesco Dec 27 '16 at 09:50
  • the difference between var declaration and var expression. the declaration (with var) creates a new variable in the current scope. a variable expression walks up the scope to find an existing. If it reaches the window object, and didnt found the variable, it creates one there so context will be part of the window object, so everytime you call myClass() it is overriden... – Jonas Wilms Dec 27 '16 at 09:54
  • Really fantastic and graphic explanation .. the "walking up the scope" really drove it in! Thanks a lot and happy '17! – Francesco Dec 28 '16 at 11:12