Question

I’m working with an svg built with Raphael, and using a form to make parts of it editable.

I have path variables similar to the following:

uk.isle_of_man
uk.republic_of_ireland
uk.england

and input fields like:

<input id="england-form" type="text" name="england">

I’m using the following code to update the fills based on which input field is selected. It’s working fine for the id but I’m doing something stupid with var b = $(this).attr("name"); and trying to use it to target the variable property. Here is the code:

$('#form').find('input').focus(function(){
var a = $(this).attr("id");
var b = $(this).attr("name");

$('#'+a).live('change', (function() {
    var value = $(this).val();
    uk.(b).color = (value);
}));

My intent is that uk.(b).color to is equivalent to uk.england.color. Any idea what I’m doing wrong? It all works fine if I use the uk.england format.

Answer 1

When you use . it’ll search for a property named b inside uk.
To search for a variable value you have to use [].

So, if I have the following object.

var 'uk' = {
    'england': {
        color: 'green'
    },
    'b': {
        color: 'wrong'
    }
};

When I use uk.(b).color. I get 'wrong'.
To get 'green'use uk[b].color.