View Full Version : if and else if with document.getElementById

06-11-2008, 07:22 AM
Hello all. I've got some code for a color picker from a site that I can't get help from. I hope to find some help here. What I'd like to do is if an input button is clicked, fill another input box with the hex number and color the background of a div. I would like to have the option to color as many divs as I want to but right now the code is coloring all of the divs. I thought a if, else if statement would work but I tried to no avail. I've attached to main *.js file and css. Here is the code as it sits now with the if statements removed from the area of the snippet. I've highlighted in red what I think the problem areas are. I'd appreciate a nudge in the right direction.
<body id="home" onload="set_style_from_cookie(), CLCPshowPicker({_x: 550,_y: 250})">

<div id="container">

<div id="CLCP" class="CLCP">This is the div where the color picker lives</div>
<div id="CLCPUpdateDiv0" style="height: 25px; width:100px;">background</div>
<div id="CLCPUpdateDiv1" style="height: 100px; width:100px;">text</div>
<div id="CLCPUpdateDiv2" style="height: 100px; width:100px;">borders</div>

<input id="hexValue_0" style="width: 125px; float: left; top:250px;" />
<input type="button" value="Background color" onclick="_whichField='hexValue_0';" style="float: left; width: 125px;" />
<div style="clear: both;"></div>
<input id="hexValue_1" style="width: 125px; float: left; top:250px;" />
<input type="radio" value="Text color" onclick="_whichField='hexValue_1';" style="float: left; width: 125px;" />
<div style="clear: both;"></div>
<input id="hexValue_2" style="width: 125px; float: left; top:250px;" />
<input type="button" value="Border color" onclick="_whichField='hexValue_2';" style="float: left; width: 125px;" />
<div style="clear: both;"></div>

<script type="text/JavaScript">

_whichField = "hexValue_0";

CLCPHandler = function(_hex) {
// This function gets called by the picker when the sliders are being dragged. The variable _hex contains the current hex value from the picker
// This code serves as an example only, here we use it to do three things:
// Here we simply drop the variable _hex into the input field, so we can see what the hex value coming from the picker is:
document.getElementById(_whichField).value = _hex;
// Here is where we color the BG of a div to preview the color:

document.getElementById('CLCPUpdateDiv0').style.background = ("#" + _hex);
document.getElementById('CLCPUpdateDiv1').style.background = ("#" + _hex);

document.getElementById('CLCPUpdateDiv2').style.background = ("#" + _hex);

// Giving you control over this function really puts the reigns in your hands. Rewrite this function as you see fit to really take control of this color picker.
// Settings:
_CLCPdisplay = "none"; // Values: "none", "block". Default "none"
_CLCPisDraggable = true; // Values: true, false. Default true
_CLCPposition = "absolute"; // Values: "absolute", "relative". Default "absolute"
_CLCPinitHex = "0039B3"; // Values: Any valid hex value. Default "ffffff"

06-11-2008, 11:59 PM
I figured out how to do this by assigning var and using ifs