|
JavaScript - Button Switch
how to make a switch that goes on a button(sorry that i cant describe it better)
Similar TutorialsHi, This button changes the button text when clicked, but it is always calling the same function. How to make the button depending on the button text to call different functions on onclick? [CODE] <script type = "text/javascript"> function button_switch(){ if (document.switch_form.switch_b.value == "Adam"){ document.switch_form.switch_b.value="Eva"; } else{ document.switch_form.switch_b.value = "Adam"; } } </script> <form name = "switch_form"> <input type = "button" name = "switch_b" id = "switch_b" value = "Adam" onclick = "button_switch()" /> </form> [CODE] Hello 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 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. 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. 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? 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 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>")
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 ? 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"); } 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>
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? 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>
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. 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; Please can somebody help me make this code work for me. i want it to work in such a way that when someone select the ages in the combo box,it will direct the person to another page. Here is it <html> <body> <script type="text/javascript"> page = document.frmOne.cmbAge.value switch (page) { case "1": document.URL = "page1.html" break case "2": document.URL = "page2.html" break case "3": document.URL = "page3.html" break case "4": document.URL = "page4.html" break default: alert("An error occurred, so we are staying here") } </script> </body> <form name="frmOne"> <select name = "cmbAge"> <option value = 1>5 to 16</option> <option value = 2>17 to 30</option> <option value = 3>31 to 45</option> <option value = 4>46+</option> </select> </form> </body> </html> Please help me solve this.. Thanks you. Clement Osei. Hi, Please help code not working.i want the alert message to pop up when a cmbprop is selected. <script type="text/javascript"> function PropertyOwn(property) { prop=document.frmone.cmbprop.value switch(property) { case"0": // no error occured break case"1": alert("I am a rich men") break case"2": alert("i am a poor men") break case"3": alert("Thank God for this opportunity") break default: alert("Just try again") } } </script> <form name="frmone"> <select name="cmbprop" onchange="propertyOwn(this.value)"> <option value=0>--choose from one--</option> <option value=1>I have BMW</option> <option value=2>I rent a sigle room</option> <option value=3>Seing possibilities</option> </select> </form> Thanks. Clement Osei 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-- |
|||||||