I’ve been working on the Simon Front-End project. I have the design HTML/CSS sorted and I had jQuery illuminating/playing a sound when a pad was clicked, or when randomly instructed, I have not yet worked out the game logic.
As my code contained a lot of functions, and repeated code; non-DRY, I decided to create an object with red, green, blue and yellow objects inheriting properties.
I want to dynamically create the jQuery selector based on the input parameter.
This code works:
function Pad(color, sound){
this.color = color;
this.sound = sound;
this.lightOn = function(){
$("#red").addClass("redLit");
this.sound.play();
setTimeout(this.reset, 2000);
}
this.reset = function(){
$("#red").removeClass("redLit");
sound2.pause();
}
};
var redPad = new Pad("red", sound2);
redPad.lightOn();
This code doesn’t work:
function Pad(color, sound){
this.color = color;
this.sound = sound;
this.col_id = '"#' + this.color + '"';
this.light_class = '"' + this.color + 'Lit"';
console.log(this.col_id);
console.log(this.light_class);
this.lightOn = function(){
$(this.col_id).addClass(this.light_class);
this.sound.play();
setTimeout(this.reset, 2000);
}
this.reset = function(){
$(this.col_id).removeClass(this.light_class);
sound2.pause();
}
};
var redPad = new Pad("red", sound2);
redPad.lightOn();
I am confused as the two console.log statements show that the correct IDs are being generated.
Can anybody show me where I am going wrong? Thanks.