Access javascript objects dynamically

This works. Like the comment, I'm not sure what "val" is, but if it's an ID, make sure it's targeted correctly.

HTML:

<p id="val">red</p>

JS:

var color = {
                red : '#ff0000',
                black : '#000000',
                silver : '#7d8989'
            };
var currentColor = $("#val").html();
console.log(color[currentColor]);

You maybe want to trim your string before finding the color in your map:

var color = {
    red : '#ff0000',
    black : '#000000',
    silver : '#7d8989'
};

var currentColor = $.trim( $(val).html() );

console.log(color[currentColor]);

And it's not very fast to route your data through the DOMNodes like that.

Your code seems to be working fine, so it is probably something wrong with your selector See http://jsfiddle.net/9GPbv/1/ works fine

<div class="val">red</div>

var color = {
                red : '#ff0000',
                black : '#000000',
                silver : '#7d8989'
            };

var currentColor = $(".val").html();

alert(color[currentColor]);

Also if your using an input like at http://jsfiddle.net/tMFZr/ you should use .val() not .html()

You should use quotes in your object since you will be using it as string values: HTML

<div id="val">red</div>

JS

var color = {
                'red' : '#ff0000',
                'black' : '#000000',
                'silver' : '#7d8989'
            };

var currentColor = $(val).html();

console.log(color[currentColor]);

I think you are getting the undefined in the chrome console. IF so please take a look at What does it mean if console.log(4) outputs undefined in Chrome Console?

If your html have an id:

var color = {
    red : '#ff0000',
    black : '#000000',
    silver : '#7d8989'
};
var currentColor = document.getElementById("val").innerText;
console.log(currentColor);
console.log(color[currentColor]);