Adding array names to a string and updating - javascript

Question

I'm trying to create a function that will continue to add the selected color ids to my #storage_disply in this format:

var name_of_array = ["#xxxxxx", "#xxxxxx", etc]

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

$(document).ready(function() {



var selected_color = [];
var ids = [];
var black_colors = [];
var blue_colors = [];
var brown_colors = [];
var gray_colors = [];
var green_colors = [];
var orange_colors = [];
var pink_colors = [];
var purple_colors = [];
var red_colors = [];
var teal_colors = [];
var white_colors = [];
var yellow_colors = [];

    $(".color_cell").click(function(){
        // ADD MY COLOR TO SELECTED COLOR'S ARRAY       
        selected_color.push($(this).attr("id"));
        console.log($(this).attr("id"));
        $(this).css({'background-color':'white'});
        $(this).unbind('click');
        updateDisplay(selected_color);
    });



    $(".btnColor").click(function(){
         // MAKE SELECTED COLOR BE ME
        if ($(this).attr("id") == "black") {
            selected_color = black_colors;
        }
        else if ($(this).attr("id") == "blue") {
            selected_color = blue_colors;
        }
        else if ($(this).attr("id") == "brown") {
            selected_color = brown_colors;
        }
        else if ($(this).attr("id") == "gray") {
            selected_color = gray_colors;
        }
        else if ($(this).attr("id") == "green") {
            selected_color = green_colors;
        }       
        else if ($(this).attr("id") == "orange") {
            selected_color = orange_colors;
        }
        else if ($(this).attr("id") == "pink") {
            selected_color = pink_colors;
        }
        else if ($(this).attr("id") == "purple") {
            selected_color = purple_colors;
        }
        else if ($(this).attr("id") == "red") {
            selected_color = red_colors;
        }
        else if ($(this).attr("id") == "teal") {
            selected_color = teal_colors;
        }
        else if ($(this).attr("id") == "white") {
            selected_color = white_colors;
        }
        else if ($(this).attr("id") == "yellow") {
            selected_color = yellow_colors;
        }
        }); // end button handler
    }); // end ready()

function updateDisplay(colors) {

        jQuery.each(colors, function(key, value) {


        //var test_colors = ["#000000", "#FFFFFF"];
        //display var
        $("#storage_display").html("var "+$("#storage_display").html()+" " +value);

   });

}

</script>
<br>
<br>
    <button type="button" class="btnColor" id="black">Black</button>&nbsp;
    <button type="button" class="btnColor" id="blue">Blue</button>&nbsp;
    <button type="button" class="btnColor" id="brown">Brown</button>&nbsp;
    <button type="button" class="btnColor" id="gray">Gray</button>&nbsp;
    <button type="button" class="btnColor" id="green">Green</button>&nbsp;
    <button type="button" class="btnColor" id="orange">Orange</button>&nbsp;
    <button type="button" class="btnColor" id="pink">Pink</button>&nbsp;
    <button type="button" class="btnColor" id="purple">Purple</button>&nbsp;
    <button type="button" class="btnColor" id="red">Red</button>&nbsp;
    <button type="button" class="btnColor" id="teal">Teal</button>&nbsp;
    <button type="button" class="btnColor" id="white">White</button>&nbsp;
    <button type="button" class="btnColor" id="yellow">Yellow</button>&nbsp;

As of now it displays: var var var var var var 6010b0 6010b0 9010b0 6010b0 9010b0 f010b0

I'm really new to this, and I don't understand how to get an array name into the string.

Thanks in advance!

gilly3 · Accepted Answer · 2011-08-09 21:16:50Z

1

No loop required. Just join the Array and add some extra string where needed:

function updateDisplay(colors) {
    var allColors = "\"#" + colors.join("\", \"#") + "\"";
    $("#storage_display").html("var name_of_array = [" + allColors + "]");
}

Edit: to customize the array name, pass this.id to updateDisplay():

$(".color_cell").one("click", function() {
    selected_color.push(this.id);
    $(this).css({'background-color':'white'});
    updateDisplay(selected_color, this.id);
});

function updateDisplay(colors, name) {
    var allColors = "\"#" + colors.join("\", \"#") + "\"";
    $("#storage_display").html("var " + name + "_colors = [" + allColors + "]");
}

edited Aug 9, 2011 at 21:16

answered Aug 9, 2011 at 20:46

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Montagne · Accepted Answer · 2011-08-09 20:44:23Z

1

Try this:

function updateDisplay(colors) {
    $("#storage_display").text("var name_of_array = [" + colors.join(", ") +"]");
}

join will join the elements in your array together separated by the parameter you pass to it. No need to loop it yourself.

answered Aug 9, 2011 at 20:44

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

Richard Over a year ago

Thanks! A quick question, how do I make the name_of_array dynamic? Because it depends on what button/class I choose that sends the clicked IDs into a specific arrays.

Collectives™ on Stack Overflow

Adding array names to a string and updating - javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related