...

View Full Version : accessing and changing two items in an object



emg
07-07-2011, 03:34 AM
So I'm pretty much new to JS, and I'm trying to write something, and I'm having a problem.

It's a color picker. So I have an object that defines the default color, and then when the color is updated, the different css classes need to be updated as well.

So here's what I was trying to do




var colorPicker = {

mainColor: "red",

backgroundColor: this.mainColor + "bkgd",

}



So problem 1 is I keep getting "undefined" returned for "this.mainColor". If I use colorPicker.mainColor, it hasn't been created yet so it throws an error.

Problem two is if I update mainColor from another function, say to make mainColor = "green", then backgroundColor doesn't automatically update.

Any help is appreciated.

Thanks

tfburges
07-07-2011, 06:57 AM
You just need to make backgroundColor a function so that it always gets executed when called:


var colorPicker = {
mainColor: "red",
backgroundColor: function(){return this.mainColor + "bkgd"}
};



<input type="button" value="1) should say redbkgd" onclick="alert(colorPicker.backgroundColor());">
<input type="button" value="2) change to blue" onclick="colorPicker.mainColor = 'blue';">
<input type="button" value="3) should say bluebkgd" onclick="alert(colorPicker.backgroundColor());">

emg
07-07-2011, 07:08 AM
Thanks for the suggestion but I tried that before and it doesn't work. It still thinks that " this.mainColor " is undefined.

Any other ideas?

tfburges
07-07-2011, 07:13 AM
What browser are you using?

I just tested it on 5 different browsers (including Internet Exploder lol) and it worked in every one. You must not have implemented it correctly. Can you post your entire code?

This is what I tested:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
var colorPicker = {
mainColor: "red",
backgroundColor: function(){return this.mainColor + "bkgd"}
};
</script>
<body>
<input type="button" value="1) should say redbkgd" onclick="alert(colorPicker.backgroundColor());">
<input type="button" value="2) change to blue" onclick="colorPicker.mainColor = 'blue';">
<input type="button" value="3) should say bluebkgd" onclick="alert(colorPicker.backgroundColor());">
</body>
</html>

emg
07-07-2011, 10:27 PM
I figured out a different way to get me the same results, and I wiped everything from yesterday. I had it pretty much exactly as you wrote your js and it didn't work, it kept returning undefined.

But now it looks like:




var colorPicker = {

setColors: function(color){
if (!color) {
this.mainColor = "red";
}
else {
this.mainColor = color;
}
this.backgroundColor = this.mainColor + "bkgd";
},
}


there's some other logic in there that I stripped out for the purposes of the example.

tfburges
07-08-2011, 12:02 AM
There's really no reason whatsoever for the code I provided to not have worked for you. If you copy and paste the HTML into a blank file and try it out, you'll see that it works. You must have been leaving out a small but vital component.

Nonetheless, I'm glad you got it working!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum