Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    emg
    emg is offline
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    accessing and changing two items in an object

    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

    Code:
    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

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    You just need to make backgroundColor a function so that it always gets executed when called:
    Code:
    var colorPicker = {
    	mainColor: "red",
    	backgroundColor: function(){return this.mainColor + "bkgd"}
    };
    PHP Code:
    <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());"
    Last edited by tfburges; 07-07-2011 at 05:59 AM.
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #3
    emg
    emg is offline
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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:
    PHP Code:
    <!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> 
    Last edited by tfburges; 07-07-2011 at 06:15 AM.
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #5
    emg
    emg is offline
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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!
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •