JavaScript - How To Get Basic Switch To Work

I am using a script I found and trying to make some changes.
It is a avatar creating script that will put a face together. The tabs are different parts of the face.
The problem is I don't want all the different hair colors and styles to show and in the color tab when you click a color it will bring up the hair styles in that color only in the next tab.

I have tried
if(isset($_GET['color'])) {
but this is only showing the first color style cant it to work. So then tried to use switch like this
PHP Code:
<p>
<span name="color">
<img src="herotmb/color0.png" alt="" /><input name="avatar[color]" type="radio" value="black" id="black" onclick="swapImage(this);" />
<img src="herotmb/color1.png" alt="" /><input name="avatar[color]" type="radio" value="brown" id="brown" onclick="swapImage(this);" />
<img src="herotmb/color2.png" alt="" /><input name="avatar[color]" type="radio" value="darkbrown" id="darkbrown" onclick="swapImage(this);" />
<img src="herotmb/color3.png" alt="" /><input name="avatar[color]" type="radio" value="yellow" id="red" onclick="swapImage(this);" />
<img src="herotmb/color4.png" alt="" /><input name="avatar[color]" type="radio" value="red" id="yellow" onclick="swapImage(this);" />
</span>
</p>




                
<?php



    switch(id){
              case 'BLACK':
            echo '
                <p>
                <img src="heroimg/hair0-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-black" />
                <img src="herotmb/hair1-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-black" />
                <img src="herotmb/hair2-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-black" />
                <img src="herotmb/hair3-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-black" />
                <img src="herotmb/hair4-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-black" />
                <img src="herotmb/hairNone-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'BROWN':
            echo '
                <p>
                <img src="herotmb/hair0-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-brown" />
                <img src="herotmb/hair1-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-brown" />
                <img src="herotmb/hair2-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-brown" />
                <img src="herotmb/hair3-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-brown" />
                <img src="herotmb/hair4-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-brown" />
                <img src="herotmb/hairNone-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'DARKBROWN':
            echo '
                <p>
                <img src="herotmb/hair0-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-darkbrown" />
                <img src="herotmb/hair1-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-darkbrown" />
                <img src="herotmb/hair2-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-darkbrown" />
                <img src="herotmb/hair3-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-darkbrown" />
                <img src="herotmb/hair4-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-darkbrown" />
                <img src="herotmb/hairNone-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'RED':
            echo '
                <p>
                <img src="herotmb/hair0-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-red" />
                <img src="herotmb/hair1-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-red" />
                <img src="herotmb/hair2-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-red" />
                <img src="herotmb/hair3-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-red" />
                <img src="herotmb/hair4-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-red" />
                <img src="herotmb/hairNone-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'YELLOW':
            echo '
                <p>
                <img src="herotmb/hair0-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-yellow" />
                <img src="herotmb/hair1-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-yellow" />
                <img src="herotmb/hair2-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-yellow" />
                <img src="herotmb/hair3-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-yellow" />
                <img src="herotmb/hair4-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-yellow" />
                <img src="herotmb/hairNone-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

}
?>


nothing shows up.
I have searched and found this and tried it but get more errors because I'm not just using images
Code:

http://www.codingforums.com/showthread.php?t=205694

How can I get this to work ?

My switch function just goes to the default. I've double double checked the file paths of the image on the page and it's right. So I'm not sure what's going on. here's what I got:

Code:

function change2(picName,imgName)


{
switch (document[picName].src)
  {
  case document[picName].src= "images/leaf_shapes/leaf_auriculate.gif":
    document[picName].src = "images/leaf_shapes/crenate/leaf_elliptic_crenate.gif";
    break;
  case document[picName].src= "images/leaf_shapes/leaf_cordate.gif":
    document[picName].src= "images/leaf_shapes/serrate/leaf_elliptic_serrate.gif";  
  break;
  default:
    document[picName].src= "images/leaf_shapes/transparent1.gif";  
  }
}

This is driving me crazy!

So I'm using a javascript file to switch out items when a thumbnail is clicked. This includes photo, title, description, price, size, quantity and add to cart button....

The original code on the html file works fine, but as soon as it is swapped by onclick, the 'add to cart' button does nothing!

Here is the code:

Code:

var addDisplay = document.getElementById('cart-add');
	addDisplay.innerHTML = "<a class='item_add' href='/' onclick='simpleCart.add(); return false;'><img src='images/shop/cart-add.jpg' width='118' height='26' border='0'></a>";

that is what shows in my javascript file...

here is what's on the html file:

Code:

<div id="cart-add"><a class='item_add' href='/' onclick='simpleCart.add(); return false;'><img src="images/shop/cart-add.jpg" width="118" height="26" border="0"></a>
                            </div>

and that adds the item to the cart just fine, but when a thumbnail is clicked on, activating the javascript file to switch out the item/elements, the 'add to cart' button no longer does anything... by the way, I am using simpleCart.js

PLEASE HELP, PLEASE!?

Please PM me if you need more info... or post here if you have a solution. Thanks!

Hey everyone, I'm a newbie writing a tic tac toe program using OOP. It was simple setting it up so that a player could click on a box to put an X or an O there, but I've run into serious issues when trying to make it so a player couldn't overwrite the AI's choice and the AI couldn't overwrite the player's.

An example of this would be if I made the top right box an X and the AI then made the center box an O, and then I accidentally clicked the center box and made it into an X. I want to prevent that.

Every box on the grid is an object with the property of "taken" that helps the program know if a box is empty or not, so as to avert any overwriting in the first place.

If the box is empty, this.taken = 0. If the box is filled by a player, taken = 1. If filled by AI, taken = 2. I made it matter whether it was AI or human so later i can check if one of them got tic tac toe. Anyway, by default the constructor class sets this.taken = 0. But the method for checking availability and writing the X or O uses a switch which checks if taken = 0. If it is, it sets taken to either 1 or 2 and writes the necessary symbol. If taken = 1 or 2, it just alerts the player that the spot is taken.

But for some reason the switch statement can't tell when taken = anything other than 0. It always executes the code for 0 even though the code for 0 inherently makes it so that taken never equals 0 again, which means case 0 cannot happen anymore.

Below is the code with notes.


Code:

function main(input){//start of main function//
		
	function Click(who, where, what){ //this is the method for checking if it's taken or not and writing the X or O if it isn't//


 /*the argument who represents a number. 0 is no one, 1 is human, 2 is AI; where is a string literal 
representing the spot on the grid*/

		switch(this.taken){
			
			case 0:
			this.taken = who;
			document.getElementById(where).innerHTML = what;
			break;
		
			case 1:
			alert("this spot is taken");
			break;
			
			case 2:
			alert("this spot is taken");
		}//end switch
	}//end Click
			

	function Box(inputhere){//start of class//	
		this.taken = 0;
		this.pick = Click;
	}

//end of Box class//

   //object declarations (I cut out most of them and left only the relevant ones//

	var topleft = new Box();
        var topmid = new Box();
	var topright = new Box();
	var centerright = new Box();

   //end of object declarations//


	switch (input){

/*in each .pick(), the first arg is whether or not a player chose it (1 = player did, 2 = comp did). 
The second arg is which box and the third is whether to put an X or O. The input variable in the switch statement is an argument passed through main() when the 
player clicks on a box. Topleft passes 1.1, topmid passes 1.2 and so on.*/

			case 1.1:{

//The first instance of .pick() in each case is what the player did. The second is what the AI will do in repsonse.//

               
			topleft.pick(1, "topleft", "X");
                        topmid.pick(2, "topmid", "<span>O</span>");

		break;
			}//end of case 1.1
			
			case 1.3:{
			topright.pick(1, "topright", "X");
			centerright.pick(2, "centerright", "<span>O</span>");
		break;
			}//end of case 1.3
	}//end of switch


}//end of main//

Is there anyone who has any idea why on earth this is happening? I've been at it for an embarrassing amount of hours.

Also, thanks to anyone who even considers helping : )
(feel free to flame me if my code sucks or my post is too long or anything).

just a general question really... now that I've finally started using switches, it seems to me that they're just a big if /else if statement, with an else thrown in at the end for the default.

but that can't be right. I know that in javascript there are a million ways to achieve the same result, but why would they (whoever they are) go to the trouble of making two basic operations that do exactly the same thing?

to me it seems that switches are better for lots of conditions and if else is a quick way to work with two or three, but apart from readability, are there any inherent advantages in choosing one approach over the other?

all opinions appreciated, and I hope I don't start another argument.