Simon project - object not working

Simon project - object not working
0.0 0

#1

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.


#2

I haven’t testes it but I think that you dont need to put the double quotes in the string you are passing to the jquery selector. Try to use '#' + this.color + ... without double quotes when you create the id and class string


#3

I think that’s it - thanks.