[solved] On Click an then toggle back...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
theyapps
Forum Newbie
Posts: 8
Joined: Tue Sep 06, 2011 12:47 am

[solved] On Click an then toggle back...

Post by theyapps »

Ok I have been trying to get this to work all night... Basically I have a table and each cell is filled with a number, I would like when the user clicks on a cell it changes the background color. I have succeeded at that! What I can't get to work is to get it to change back. Would this even be possible or am I climbing up the wrong tree?

edit: right after I posted this i found the solution. was gonna just delete this post but I decided to update in case it may help someone.
Posted by: joebert on http://www.ozzu.com/programming-forum/c ... 31166.html
The Script:

Code: Select all

<script language="javascript">
/* First we setup out colors in the order they will be used using an array */
colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff"];
/* Next we declare an empty array that we will fill with RGB forms of our colors for MSIE & Mozilla compatability */
cRGB = [];
/* This is the function that transforms the hex values into RGB values, it splits the color paramater into 3 substrings, parses a decimal from the hex, & creates a RGB(rrr, ggg, bbb) string and returns the string to whatever called the function */
function toRGB(color){
    var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";    
    return rgb;
}
/* This loops through our colors & fills our cRGB array with the RGB string values returned from the toRGB function */
for(var i=0; i<colors.length; i++){
    cRGB[i] = toRGB(colors[i]);
}
/* this is the function that takes care of grabbing the current background color & changing accordingly (see inner comments) */
/* target paramater will be passed (this.id) from the td onclick events */
function changeColor(target){
    /* This checks if the browser is an MSIE browser, if it is it converts the hex value that will be returned from checking the targets background into an rgb string, if not MSIE it uses the value as is, the result from either is assigned to the local variable "swapper" */
    var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
    /* declare some helper variables to keep track of what color is found */
    var set = false;
    var xx;
    /* Loop through the cRGB array comparing each value against the value of the swapper variable */
    for(var i=0; i<cRGB.length; i++){
        /* if they match */
        if(swapper == cRGB[i]){
            /* if adding 1 to i makes it equil to the length of the cRGB array then we need to use zero as then next index of the array to use, else we can use i+1 */
            if(((i+1)) >= cRGB.length){
                xx = 0;
            }else{
                xx = i+1;
            }
    
            /* set the background */
            document.getElementById(target).style.background = colors[xx];
            /* keep the condition at the end of the function from assigning a default value, make i equil to the length of the array so the loop will exit */
            set = true;
            i=cRGB.length;
        }
    }
    /* if no match was found then assign a default value */
    set ? null : document.getElementById(target).style.background = colors[1];
}
</script>
And the HTML:

Code: Select all

<style type="text/css">
td{width:100px; height:100px;background:#ff0000;}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td id="a1" onclick="changeColor(this.id);"></td>
        <td id="a2" onclick="changeColor(this.id);"></td>
        <td id="a3" onclick="changeColor(this.id);"></td>
        <td id="a4" onclick="changeColor(this.id);"></td>
        <td id="a5" onclick="changeColor(this.id);"></td>
    </tr>
    <tr>
        <td id="b1" onclick="changeColor(this.id);"></td>
        <td id="b2" onclick="changeColor(this.id);"></td>
        <td id="b3" onclick="changeColor(this.id);"></td>
        <td id="before" onclick="changeColor(this.id);"></td>
        <td id="b5" onclick="changeColor(this.id);"></td>
    </tr>
    <tr>
        <td id="c1" onclick="changeColor(this.id);"></td>
        <td id="c2" onclick="changeColor(this.id);"></td>
        <td id="c3" onclick="changeColor(this.id);"></td>
        <td id="c4" onclick="changeColor(this.id);"></td>
        <td id="c5" onclick="changeColor(this.id);"></td>
    </tr>
    <tr>
        <td id="d1" onclick="changeColor(this.id);"></td>
        <td id="d2" onclick="changeColor(this.id);"></td>
        <td id="d3" onclick="changeColor(this.id);"></td>
        <td id="d4" onclick="changeColor(this.id);"></td>
        <td id="d5" onclick="changeColor(this.id);"></td>
    </tr>
    <tr>
        <td id="e1" onclick="changeColor(this.id);"></td>
        <td id="e2" onclick="changeColor(this.id);"></td>
        <td id="e3" onclick="changeColor(this.id);"></td>
        <td id="e4" onclick="changeColor(this.id);"></td>
        <td id="e5" onclick="changeColor(this.id);"></td>
    </tr>
</table>
</body>
Post Reply