up vote 1 down vote favorite

I'm trying to add elements into an Associative Array, which is colors = [] I want it to have the ["id":selected_color] but my browser keeps crashing (an infinite loop somewhere?)

I'm not sure if I'm adding the elements into the array correctly.

What is happening is that I'm clicking on a span element, which has its ID value set to a hexcode value, and I'm trying to capture that value and associate it with the selected._color

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">

var selected_color = "";
var colors = [];

$(document).ready(function() {
    $(".color_cell").click(function(){
        // ADD MY COLOR TO SELECTED COLOR'S ASSOCIATIVE ARRAY       
        colors[$(this).attr("id")] = selected_color;
        console.log($(this).attr("id"));
        $(this).css({'background-color':'white'});
        $(this).unbind('click');
        updateDisplay(colors);
        alert("hi");
    });

    $(".btnColor").click(function(){
         // MAKE SELECTED COLOR BE ME
        alert("hey");
        selected_color = $(this).attr("id");
    }); // end button handler
}); // end ready()

function updateDisplay(colors) {
    jQuery.each(colors, function(key, value) {
        //it seems to crash here...
        $("#storage_display").html("var "+$("#storage_display").html()+" " +value);
    });
};
</script>
share|improve this question
I tried making your example work, but my brain exploded so I just came up with my own. Enjoy! jsfiddle.net/2BdEJ – Jackson Aug 9 '11 at 23:54

3 Answers

up vote 7 down vote accepted

You're defining colors as an array instead of an object.

You just need to initialize it properly:

 var colors = {}; // or new Object();

Additional suggestion... there's really no need for the jQuery.each here. Iterating over an associative array like this (let's not argue the semantics of whether you can actually call this an associative array) looks like this:

function updateColors(colors)
{
    for (var key in colors)
    {
        $("#storage_display").html("var "+$("#storage_display").html()+" " +colors[key]);
    }
}
share|improve this answer
1  
Just to explain the above, there are no associative arrays as such in Javascript, but properties of objects can be set with that syntax, i.e. colors.test="hello" is the same as colors['test']="hello" – bcoughlan Aug 9 '11 at 23:43
I changed my code and initialized using var colors = {}; : and I tried it to colors{$(this).attr("id")} = selected_color; and also tried colors[$(this).attr("id")] = selected_color; I'm sorry, but I guess I don't quite understand what is going on here. I understand that it should come out to what @waitinforatrain said, but I go to my console to see if it's picking up anything after I click by injecting var colors[0]; and tried var colors{0} but it returns syntax errors. – Richard Aug 10 '11 at 4:27
Here's a demo of your code with the {}: jsfiddle.net/waitinforatrain/rDBaJ . Tell me what you expect to happen that doesn't happen – bcoughlan Aug 10 '11 at 7:44
@Richard Lu - Waitinforatrain's fiddle is good. You have multiple problems above... Your 2nd syntax (colors[$(this).attr("id")] = selected_color; is correct, but perhaps you have another issue going on. var colors[0]; is just an error, as would var colors{0}. First, you create the object (var colors = {};), then you can access it (var foo = colors['red'];). – John Green Aug 10 '11 at 8:47
This is making me go nuts. I tried var foo = colors['red']; but it returned undefined. I'm not sure what foo means. I tried initializing to var colors = new Array(); which actually works. I can see that the values are showing up in the console. For my updateDisplay(colors) function I'm trying to have it show up my information in #storage_display something like: var selected_color = ["hexcode", "hexcode", "hexcode"] so verbatim would be like var black = ["#000000", "#200000"] and etc as I continue to add colors. Thanks for the continuing support. You guys are awesome. – Richard Aug 10 '11 at 15:19
show 2 more comments
up vote 0 down vote

Why don't you try just some normal javascript instead of 

colors[$(this).attr("id")] = selected_color;

try using

colors.push(selected_color);

and instead of your jquery loop, try using

for(var i = 0; i < colors.length; i++) {
    $('#storage_display').html('whatever your trying to do here use colors[i]');
}

I dont understand what you're trying to do in the loop but assuming it did work, the html will be something like 'var var var var var var hexcode hexcode hexcode hexcode hexcode'

share|improve this answer
This solution drops the 'selected_color' entirely. If you wanted to do this using a standard array, it would be something more like colors.push({'id':$(this).attr('id'),'val':selected_color});. Of course, as soon as you start creating an array of name-value pairs which have no explicit need for indexing... you should just use an associative array. : ) – John Green Aug 9 '11 at 23:58
Oops yeah thats a typo. As far as I can see there is no use of the 'key' and no reason for this to not just be a normal array if all that is needed is a loop. – James Hay Aug 10 '11 at 0:00
They key solution will intrinsically remove duplicates, but I agree... there's no real reason other than that. – John Green Aug 10 '11 at 0:05
up vote 0 down vote

Apart from everything that was mentioned before ID attributes must begin with a letter A-Z or a-z . That might crash your browser.

Also if you are only storing colors in your array why not use just a normal array? (as James suggests)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.