|
JavaScript - Switch Vs. If Else
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. Similar TutorialsHello all I have a video playlist useing iframe http://alohainvesting.com/html5/Html5player.html Is there a way to get same results without iframes? i just want to switch items on nav to the wrapper window. can this be done? Thanks I want to make a function that will also play a sound byte when you click on the large image. i need the sound byte to change with the images. Here is the code that i am using. Code: intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "images/picture1-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 2;
return(false);
case 2:
IMG1.src = "images/picture2-lg-over.png"
IMG2.src = "images/picture1-sm-top.png"
IMG3.src = "images/picture3-sm-btm.png"
intImage = 3;
return(false);
case 3:
IMG1.src = "images/picture3-lg-over.png"
IMG2.src = "images/picture2-sm-top.png"
IMG3.src = "images/picture1-sm-btm.png"
intImage = 1;
return(false);
}
}
i have tried many things that involved each case to contain a different IMG1.onClick=""; value but it doesnt seem to change when the case changes. I have also tried making another switch/case that would change the value of the onClick event.. nothing. any sugestions? I have a function I call like this: var theBase = getBase(percent); then, the function: function getBase(percent) { var base=''; switch (percent) { case percent.indexOf("this") == 4: base = "that" break; case percent.indexOf("thisOther") == 9: base = "thatOther" break; } return base; } However, even if percent.indexOf("this")==4 (or if any other case matches perfectly), it never enters that case and assigns a value to 'base'. What am I doing wrong? Give me an example for switch statements. I had to create one that tests value of parameter using a text string, I came up with this value Code: function createBar(partyType,percent){
switch(partyType) {
case D: <td class='dem'></td>
break;
Should I use " or ' between the dem? I am using break statements. do all breaks should end with string or do i need the bracket? I hope this does not seem like i getting people to do homework for me again,, just want to verify if i did this area correctly? Here is the code, in full: <htmll"> <head><title></title> <script type="text/javascript"> <!-- HIDE FROM INCOMPATIBLE BROWSERS function checkGrade(grade, value) { switch (grade) { case "A": if(grade == '90') window.alert("Your grade is excellent."); break; case "B": window.alert("Your grade is good."); break; case "C": window.alert("Your grade is fair."); break; case "D": window.alert("You are barely passing."); break; case "F": window.alert("You failed."); break; } } // STOP HIDING FROM INCOMPATIBLE BROWSERS --> </script> </head> <body> <form name="gradeForm"action="Your Grades"> <input type="text" name="grade" /> <input type="button" value="Check Grade" onclick="checkGrade(document.gradeForm.grade.value);" /> </form> </body> </html> What's throwing me off is the "A" in the case. As well, "(document.gradeForm.grade.value)" I need to make it a IF statement, but not sure how to call that function. Hi There, I need your help, I can't seem to get this work, which it theorecticly should work any ideas? <script> var x = 3 switch(x){ case x > 0: alert("overdue") break case x = 0: alert("due today") break case x < 0: alert("will be due") break } </script> Much thanks for everyones help. Cheers, Jay how to make a switch that goes on a button(sorry that i cant describe it better)
hi, I have a few links on my website as follows: Code: <a href="javascript:switchid('a6');">Link 6</a>
but when I view source it comes out like this: Code: <a href='javascript:switchid('>Link 6</a>
Can someone please help? Currently I have the following javascript switch statement ... Code: switch(firstchar){
case "0": case "1": case "2": case "3": case "4": case "5": case "6": case "7": case "8": case "9":
orderlist[0] += addthis; break;
case "a": case "A": orderlist[1] += addthis; break;
case "b": case "B": orderlist[2] += addthis; break;
case "c": case "C": orderlist[3] += addthis; break;
case "d": case "D": orderlist[4] += addthis; break;
case "e": case "E": orderlist[5] += addthis; break;
case "f": case "F": orderlist[6] += addthis; break;
case "g": case "G": orderlist[7] += addthis; break;
case "h": case "H": orderlist[8] += addthis; break;
case "i": case "I": orderlist[9] += addthis; break;
case "j": case "J": orderlist[10] += addthis; break;
case "k": case "K": orderlist[11] += addthis; break;
case "l": case "L": orderlist[12] += addthis; break;
case "m": case "M": orderlist[13] += addthis; break;
case "n": case "N": orderlist[14] += addthis; break;
case "o": case "O": orderlist[15] += addthis; break;
case "p": case "P": orderlist[16] += addthis; break;
case "q": case "Q": orderlist[17] += addthis; break;
case "r": case "R": orderlist[18] += addthis; break;
case "s": case "S": orderlist[19] += addthis; break;
case "t": case "T": orderlist[20] += addthis; break;
case "u": case "U": orderlist[21] += addthis; break;
case "v": case "V": orderlist[22] += addthis; break;
case "w": case "W": orderlist[23] += addthis; break;
case "x": case "X": orderlist[24] += addthis; break;
case "y": case "Y": orderlist[25] += addthis; break;
case "z": case "Z": orderlist[26] += addthis; break;
default: alert('Illegal Entry'); break;
}
... that I wish to optimize so that I do not need to write out so many lines of code. Also, I wish to take into the following as consideration ... Code: case "aa": case "Aa": case "aA": case "AA": orderlist[1] += addthis; break; ... for each two-character combination. (aa to zz) Appreciate any help. Hello, I'm new to this forum and well... I'm pretty new to JavaScript as well. Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great. Thanks for taking a look! Code: <head>
<script>
function switch1(div) {
if (document.getElementById('blue')) {
var option=['blue','green','purple'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switchImg(i){
document.images["blue"].src = i;
}
</script>
<style>
#image-switch ul {
margin:0 0 0 20px;
color:red;
list-style-type:none;
}
#image-switch li {
padding:10px;
}
#image-switch #green, #image-switch #purple {
display:none;
}
#radiobs {
width:150px;
position:relative;
margin:0;
}
#radiobs input {
margin:0;
padding:0;
position:absolute;
margin-left:6em;
width:15px;
}
</style>
</head>
<div><img src="blue.jpg" id="blue" /></div>
<ul id="radiobs">
<li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
</ul>
</div>
<div class="clear"></div>
This works fine in IE only. Any thoughts. function DisplaySelectedColor(cColor) { var elToFill = document.getElementById(cFieldOnFocus) elToFill.value = cColor; switch(cFieldOnFocus){ case"Page-Background":document.getElementById("Page").style.backgroundColor =cColor; break; case"Page-Background": document.getElementById("Page").style.backgroundColor =cColor; break; case"Outside-Border": document.getElementById("main_container").style.borderColor =cColor; break; case"Logo-Background": document.getElementById("logo_area").style.backgroundColor =cColor; break; case"Logo-Font": document.getElementById("logo_area").style.color =cColor; break; case"Outside-Area-Background": document.getElementById("main_container").style.backgroundColor =cColor; document.getElementById("linktestdiv").style.backgroundColor =cColor; break; case"Outside-Area-Font": document.getElementById("main_container").style.color =cColor; document.getElementById("main_nav").style.color =cColor; document.getElementById("right_column_content").style.color =cColor; document.getElementById("linktestdiv").style.color =cColor; document.getElementById("footer").style.color =cColor; break; case"Content-Background": document.getElementById("main_content").style.backgroundColor =cColor; break; case"Content-Font": document.getElementById("main_content").style.color =cColor; break; case"Footer-Background": document.getElementById("footer").style.backgroundColor =cColor; break; case"Hyper-Link": document.getElementById("activelink").style.color = cColor; break; case"Hyper-Link-Hover": document.getElementById("hoverlink").style.color = cColor; break; case"Hyper-Link-Visited": document.getElementById("visitedlink").style.color = cColor; break; } } Thanks for any help. Can't figure it out. Hi all, so "click" I have got my head around oop. And can see the huge advantages of using it - encapsulation, interfaces, reusability of code and the ultimate creation of my own library (after I have read my new christmas book "Apress Pro JavaScript Design Patterns") I am moving my brain over to writing work in oop and am going to write a little portfolio with an attachment of the starts of a personal unobtrusive JavaScript library. My question/advice needed is - is there a situation where it is better to use procedural programming in Javascript for say a "simple" site, does oop work slow the script down? (think this maybe a silly question - and I can check in firebug) Or does it really not matter? What for you guys/gals are the advantages of oop in JavaScript? Thanks in advance for any insights into this -- I have posted a similar question for Php-- Hi everyone, I'm a beginner who has now come across the switch statement and has been trying to understand it with this simple coding i came up with. I think I have the syntex of the switch command correct but I'm trying to get it to work along with a HTML form and a function. I've been trying to figure out what i am do wrng but can not seem to see the solution. can someone guide me to the solution? thanks John Code: <html>
<head>
<title>Using the switch statement.</title>
<script type="text/javascript">
function basegraincheck(){
var basegrain = document.basegrainform.basegrain1.value
return basegrain
}
switch (basegrain) {
case 1 :
displaygrain = "US Pale ale malt"
break
case 2 :
displaygrain = "Maris Otter Malt"
break
case 3 :
displaygrain = "Crystal Malt"
break
default: displaygrain = "somethings wrong with the switch statement"
}
document.write(displaygrain);
</script>
</head>
<body>
<form name="basegrainform" action="" method="get" onsubmit="basegraincheck()">
<h2>Select a grain</h2>
<br>
<p>Pale ale Malt</p>
<input type="radio" name="basegrain1" value="1">
<br>
<p>Maris Otter Malt</p>
<input type="radio" name="basegrain1" value="2">
<br>
<p>Crystal Malt</p>
<input type="radio" name="basegrain1" value="3">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Im creating a switch statement for this case, but dont know how to start - Create a Switch statement that tests the value of the partyType parameter. If partyType equals "D", store the following text string in a variable named barText: Code: <td class='dem'> </td> If partyType equals "R", barText should equal Code: <td class='rep'> </td> etc.. So since its going to test the value of the partyType parameter, and store the text string in a variable named barText do i begin like: Code: var barText switch (partyType) and how do I write the equals "D", etc. the only examples I have are Code: if (seating = = 'B')
doc.write ("Your seat is in the balcony")
^ would i write it like that except seating would = partyType and "Your seat in the balcony" would equal the "<td class etc." ie Code: if (partyType = = "D")
doc.write ("<td class='dem'> </td>")
Hi, im new to this so i was wondering if anyone could tell me where im going wrong? im trying to get my switch statement to work and give me a specific reply for 4 names and if one of these names isnt typed into the promt box then i want an alert box to appear but i cant seem to get it to work. any ideas? <body> <script type="text/javascript"> //<![CDATA[ var Card_Suit; Card_Suit=window.prompt("Think of a card suit? What suit are you thinking of?","????"); //]]> </script> <h1 style='color: blue'>Your Future In The Cards</h1> <script type="text/javascript"> //<![CDATA[ switch(Card_Suit) { case "clubs": {document.write("<p style='color: black'>"); document.write("Beware of three legged dogs crossing your path</p>"); } break; case "spades": {document.write("<p style='color: black'>"); document.write("Wear brown with pink spots for luck</p>"); } break case "hearts": {document.write("<p style='color: red'>"); document.write("You are going to meet a stranger with two heads</p>"); } break; case "diamonds": {document.write("<p style='color: red'>"); document.write("Your lucky number for today is 13,254,297</p>"); } break; } else window.alert("this is not a card"); } I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover. Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails. Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes. Any help would be thoroughly appreciated!! Hi guys. I was wondering if its possible to switch a form action using javascript. Because im trying to have a search field on my main site for my forum and website. By having two boxes underneath my search field so people can select if the want to search my phpbb forum ore my site. Well anyway, mabey switching the form action is not the right approach. Any tips are welcome thanks. 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 ? Here i am attempting to connect to my javascript two input fields one number and one radio button to change the function computeBudget()... Thank you in advance im desperate for over 48 hours 3 days with trial and error and looking for tutorials for this kind of situation. Code: <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script>
function computeBudget() {
var income = document.getElementById('income').value;
switch (income) {
case "Weekly":
this.add((income * 52) / 12);
break;
case "biWeekly":
this.add((income * 26) / 12);
break;
}
var grocery_expenses = document.getElementById('grocery_expenses').value;
var car_insurance = document.getElementById('car_insurance').value;
var home_mortgage = document.getElementById('home_mortgage').value;
var home_utilities = document.getElementById('home_utilities').value;
var life_insurance = document.getElementById('life_insurance').value;
var monthgain = (income - grocery_expenses - car_insurance - home_mortgage - home_utilities - life_insurance).toFixed(2);
monthgain = monthgain.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('monthgain').innerHTML = "Monthly Net Gain = $" + monthgain;
var yeargain = ((income - grocery_expenses - car_insurance - home_mortgage - home_utilities - life_insurance) * 12).toFixed(2);
yeargain = yeargain.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('yeargain').innerHTML = "Yearly Net Gain = $" + yeargain;
}
</script>
</head>
<body>
<p>Monthly Income: $<input name="income" id="income" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Weekly <input name="income" id="income" type="radio" value="Weekly" onchange="computeBudget()">BiWeekly <input name="income" id="income" type="radio" value="biWeekly" onchange="computeBudget()"></p>
<p>Grocery Expenses: $<input id="grocery_expenses" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Car Insurance: $<input id="car_insurance" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Home Mortgage: $<input id="home_mortgage" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Home Utilities: $<input id="home_utilities" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<p>Life Insurance: $<input id="life_insurance" type="number" min="1" max="100000000" onchange="computeBudget()"></p>
<h2 id="monthgain"></h2>
<h2 id="yeargain"></h2>
</body>
</html>
Reply With Quote 12-27-2014, 11:30 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Makes no sense. You have this code in the computeBudget() function: Code: this.add((income * 52) / 12); (1) The value of this depends on what invoked the computeBudget function. You invoke it from radio buttons and from text fields. (2) You use a method named add( ) on each of these various fields. There is NO SUCH METHOD defined for either radio buttons or text fields. I have no idea what you intend to do with that value you compute (e.g., ((income * 52) / 12)) but you sure as heck can't add it to anything (unless you write your own method or function named add) and you certainly can't use it to any reasonable effect on this, especially when this refers to a radio button. |
|||||||