Why is the Add New Color Button preview defaulted to black after we write the New Color span and Change Color functions

The values do not default to 0 in the JS. We set them to zero in the HTML file. If you change the value attribute in the input tag, the first, or default, color is set to whatever values you set it to. Try it.

<div class="sliders">
                <p>
                    <label for="red">Red</label>
//*****Here is where you would change to default value for Red*****
                    <input id="red" name="red" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="green">Green</label>
                    <input id="green" name="green" type="range" min=0 max=255 value=0>
                </p>
                <p>
                    <label for="blue">Blue</label>
                    <input id="blue" name="blue" type="range" min=0 max=255 value=0>
                </p>
            </div>

The preview appeared white before because it had no background color assigned, however now, when we click #revealColorSelect (the "new color" button) the function that we run calls another function changeColor(). We have programmed this second function to change the background color of the span (which will assign one the first time) when we change the sliders. Seeing as the sliders start on r = 0, g = 0, b = 0 the span changes to black before the #colorSelect toggle command takes effect making the color selector box visible when first "opening" the box.

Got it. Thank you @ David Baker

David Baker

So you mean this code here:

// Update the new Color <span> function changeColor() { var r = $("#red").val(); var g = $("#green").val(); var b = $("#blue").val(); $("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")"); }

The variables r, g, and b default to 0 before we even do anything with the sliders?