Page 1 of 1

Switch statement in javascript.

Posted: Sat Jul 16, 2011 2:53 pm
by social_experiment
I've coded this with the following in mind: A certain length value will change the class of an element. If you enter 8 characters, the background of the box will be green and display the amount of charaters, etc. The current example works perfectly. However if i try something like the commented switch statement, only the default statement is executed. Thanks in advance :)

Code: Select all

/*
 */
 function changeClass(length)
 {
	 var theElement = document.getElementById('box'); // element where innerHTML goes
	  
	 switch(length)
	 {
		 case(1):		 
		 theElement.setAttribute("class", "green");		
		 break;		
		 case(2):
		 theElement.setAttribute("class", "yellow");
		 break;
		 case(3):
		 theElement.setAttribute("class", "red");
		 break;		 
		 default:
		 theElement.setAttribute("class", "plain");			 
		 break;
	 }
	                  /* // in this example only the default statement executes
                                 case(length >= 8):		 
		 theElement.setAttribute("class", "green");		
		 break;		
		 case(length < 8):
		 theElement.setAttribute("class", "yellow");
		 break;
		 case(length <= 5):
		 theElement.setAttribute("class", "red");
		 break;		 
		 default:
		 theElement.setAttribute("class", "plain");			 
		 break;
	                 */ 
 }
 

/*
 */ 
 function showData(inputId, htmlId)
 {
	 var theElement = document.getElementById(inputId); // element to check
	 var theValue = theElement.value; // value of the element to check
	 var theHtmlElement = document.getElementById(htmlId); // element where innerHTML is to be written
	 var theLength = theValue.length; // length of data entered
	
	 changeClass(theValue.length);
	 theHtmlElement.innerHTML = theValue.length;
 }

Code: Select all

<form action="" method="post" >
<input type="text" id="inputField" name="password" size="30" onblur="showData('inputField', 'box');" />
</form>
<div id="box" class=""></div>

Re: Switch statement in javascript.

Posted: Sat Jul 16, 2011 4:39 pm
by Christopher
Try it without the parens:

Code: Select all

	 switch(length)
	 {
		 case 1:		 
		 theElement.setAttribute("class", "green");		
		 break;		
		 case 2:
		 theElement.setAttribute("class", "yellow");
		 break;
		 case 3:
		 theElement.setAttribute("class", "red");
		 break;		 
		 default:
		 theElement.setAttribute("class", "plain");			 
	 }

Re: Switch statement in javascript.

Posted: Sun Jul 17, 2011 2:37 am
by social_experiment
Thank you for the feedback

I tried the code without the parenthesis but the bit of code i'm struggling with is the switch statement. I removed 'length' as variable name in the changeClass() function because i thought it being reserved by javascript might be part of the problem but even with another variable name ('distance') only the default statement is called.

Re: Switch statement in javascript.

Posted: Sun Jul 17, 2011 11:56 am
by phazorRise
maybe i didn't get it but what is the use of-

Code: Select all

case(length >= <img src="./images/smilies/icon_cool.gif" alt="8)" title="Cool" />: 

and it it not properly closed also. ' ) ' is missing before ' : '.
the code above comment execute perfectly so where do you find trouble?

Re: Switch statement in javascript.

Posted: Sun Jul 17, 2011 2:33 pm
by McInfo
phazorRise wrote:maybe i didn't get it but what is the use of-

Code: Select all

case(length >= <img src="./images/smilies/icon_cool.gif" alt="8)" title="Cool" />: 
The <img> tag is the result of a bug in this forum's software. The character sequence "8)" was incorrectly interpreted as a smiley and replaced with the <img> tag.
social_experiment wrote:I've coded this [...]

Code: Select all

// In JavaScript, this
switch (value) {
    case (value < 10) :
}
// means
if (value == (value < 10)) {}
// which, if value is less than 10, is the same as
if (value == true) {}

Re: Switch statement in javascript.

Posted: Mon Jul 18, 2011 1:30 am
by social_experiment
@McInfo : So the switch statement in javascript will only work with case(4) or case(3) not with statements like (value > 3)?

Re: Switch statement in javascript.

Posted: Mon Jul 18, 2011 11:19 am
by McInfo
That is correct.

If you need to do a range comparison, use if-else. However, if the range is limited, you can design the switch so some cases "fall through."

Code: Select all

switch (i) {
    case 0:
    case 1:
    case 2:
        /* i is 0, 1, or 2 */
        break;
    case 3:
        /* i is 3 */
        break;
    case 4:
    case 5:
        /* i is 4 or 5*/
        break;
    default:
        /* i is something else */
        break;
}

Re: Switch statement in javascript.

Posted: Tue Jul 19, 2011 2:48 am
by social_experiment
Thanks for the help, i have now switched (no pun) to the if-else statement

Re: Switch statement in javascript.

Posted: Tue Sep 27, 2011 9:12 am
by Weirdan

Code: Select all

switch (true) {
    case something <= 2: 
          // ....
    break;
    case something == 3:
          // ....
    break;
    case something <= 5:
          // ....
    break;
    default: // >5
          // ....
    break;
}