Switch statement in javascript.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Switch statement in javascript.

Post 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>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Switch statement in javascript.

Post 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");			 
	 }
(#10850)
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Switch statement in javascript.

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: Switch statement in javascript.

Post 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?
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Switch statement in javascript.

Post 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) {}
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Switch statement in javascript.

Post 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)?
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Switch statement in javascript.

Post 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;
}
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Switch statement in javascript.

Post by social_experiment »

Thanks for the help, i have now switched (no pun) to the if-else statement
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Switch statement in javascript.

Post by Weirdan »

Code: Select all

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