Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    if and else if with document.getElementById

    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.
    Code:
    <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"
    CLCPinitPicker();
    </script>
    Attached Files Attached Files
    Last edited by TravelTech; 06-11-2008 at 11:58 PM. Reason: [Resolved]

  • #2
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resolved

    I figured out how to do this by assigning var and using ifs


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •