JavaScript - Javascript - Switch Case Issue

I'm currently attempting to make a unit conversion tool. I'd like for the user to select which unit to start and which unit to convert too. EX: 1 foot comes out to 12 inches. So far it's not going well.

I have two list boxes, named "firstmeasure" and "secondmeasure". For the purpose of this post we will use only 3 different unit in the list boxes, centimeters, feet, and inches. I also have two text boxes used to show the output and for the user to put in a number to convert. And of course, a button that calls the function (I'd prefer it to do the function automatically, but I'll get to that later).

I'm trying to use variable arrays and using the value of the list box options to define which value the array will use. Then in the function I'm trying to use a switch/case statement to allow it to figure out which numbers to plug into an equation.

My problem is that it seems to automatically go to the last case option regardless of what the list box is.

This is the form that in the HTML file:
Code:

<form action="" name="lengthform" id="lengthform" >
    <p>
      <label >Select first measurement</label>
      <br/>
      <select id="firstmeasure" name="firstmeasure" >
        <option value="1">Centimeter</option>
        <option value="2">Feet</option>
        <option value="3">Inch</option>
      </select>
      <input type="text" id="input" name="input" value="1" />
      <br/>
      <br/>
      <label >Select Second measurement</label>
      <br/>
      <select id="secondmeasure" name="secondmeasure" >
        <option value="1">Centimeter</option>
        <option value="2">Feet</option>
        <option value="3">Inch</option>
      </select>
      <input type="text" id="output" name="output" />
    </p>      
    <input type="button" onclick="calculate()" value="Convert!" />
</form>

This is whats in the Java file:
Code:

 var centimeters1 = new Array() ;
 centimeters1["1"] = "1" ; //centimeters
 centimeters1["2"] = "0.032808399" ; //feet
 centimeters1["3"] = "0.393700787" ; //inches

 var feet1 = new Array() ;
 feet1["1"] = "30.48" ; //centimeters
 feet1["2"] = "2" ; //feet
 feet1["3"] = "12" ; //inches

 var inches1 = new Array() ;
 inches1["1"] = "2.54" ; //centimeters
 inches1["2"] = "0.0833333333" ; //feet
 inches1["3"] = "3" ; //inches

function calculate() {	
var measure1 = document.lengthform.elements["firstmeasure"] ;
var measure2 = document.lengthform.elements["secondmeasure"] ;

var A = document.lengthform.input.value ;
var B ;
var C ;
	switch (measure1.value){	
		case "1" :
			B = centimeters1[measure2.value] ;
			C = A * B
	    	document.lengthform.output.value = C
		case "2" :
			B = feet1[measure2.value] ;
			C = A * B
			document.lengthform.output.value = C
		case "3" :
			B = inches1[measure2.value] ;
			C = A * B
			document.lengthform.output.value = C
	}//end switch
}//end function

So, measure1 reads the value of the first list box, and measure 2 reads the value of the second list box. I tried using a switch case statement instead of writing a ton of if statements. Which I also tried and it gave me the same problem.

If there is a much better way to do a conversion tool, than I would love to learn how. Any help on fixing this seemingly easy problem would be great.

Edit: Do I have to use an "int" variable in the switch statement? I'm using Adobe Dreamweaver and it won't allow to me to create a variable using "int", it just gives me a syntax error.

This has always puzzled me:

Code:

foo="bar";

switch(foo) {
	case "bar": {
		alert("a");
	}

	case 123: {
		alert("b");
	}
}

"a" is displayed because foo=="bar", but even if execution continues to the next block, surely "b" shouldn't be displayed because foo!=123?

Does anyone know what the logic behind this is?

Hello all! I hope everyone had a great Holiday

I'm hoping someone can help me with a Switch Menu code. I borrowed and modded the code offered he http://www.dynamicdrive.com/dynamici...switchmenu.htm

The site I'm trying to implement this menu on is: http://hardlyrhetoric.com/ste/projects.html
Additional required files for this page a
http://hardlyrhetoric.com/ste/tabcontent.js
http://hardlyrhetoric.com/ste/tabcontent.css

As you can see, the menu on the left will expand and collapse, revealing the sub-links perfectly fine. It will even display the content for each link in the first set of "Datacenters and Emergency Power" links, as it should.

The problem is with each section after "Datacenters and Emergency Power" None of the links will display content in the right column the way the first set of links does. I've looked over the code for several hours... am I missing something basic???

Greetings,

I am new to these forums, and am wrapping up a JavaScript class for the year.
I am in desperate need of help (which I usually obtain from my Instructor, but she is away from the office today) with my Tutorial 12, Case Problem 1 : New Perspectives JavaScript and AJAX 2nd Edition( by Patrick Carey). I am running xampp as my testing environment, and using Dreamweaver CS4 to write my code.

I've completed the code work, however I am having issues with Step 6 code.

6) Add the retrieveOrders() function. Within this function, do the following:
a. Create variables named user, pwd, sButton, and orderHistory to refrence the elements on the Web page with ID values of userID, pwd, submitButton, and orderhistory, respectively.

b. Add and event handler to the sButton object that runs when the button is clicked. Steps c through e should all be done within this event handler.

c . Create variables named userValue and pwdValue equal to the values entered into the user and pwd input boxes. respectively.

d. If userValue and pwdValue both are non-empty, create a request object named reqOrders. Using the get method, open the following URL with the request object /cgi-bin/wworders.pl?user=userValue&pwd=pwdValue
where userValue and pwdValue are the values of userValue and pwdValue variables, respectively.

e. Send the request and then wait for a complete and error-free response from the server. When the response arrives, store the text of the response in the orderHistory object on the Web page.
---
Here is the code from my html file and my .js file(s)
NOTE: I had to copy the addEvent function from wwlibrary.js to eliminate an error of addEvent not defined.

Code:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 12
   Case Problem 1

   Wizard Works Order History
   Author: Rachael Magnuson          
   Date: May 11th, 2010             

   Filename:         orders.htm
   Supporting files: getorders.js, wwlibrary.js, wwlogo.jpg,
                     wworders.pl, wwstyles.css


-->
   <title>Check Your Order History</title>
   <link href="wwstyles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="wwlibrary.js"></script>
	<script type="text/javascript" src="getorders.js"></script>
  
</head>

<body>
   <div id="heading"><img src="wwlogo.jpg" alt="Wizard Works" /></div>

   <div id="links">
      <ul>
         <li><a href="sblogger.htm">HOME PAGE</a></li>
         <li class="newgroup"><a href="#">Firecrackers</a></li>
         <li><a href="#">Fountains</a></li>
         <li><a href="#">Cones</a></li>
         <li><a href="#">Rockets</a></li>
         <li><a href="#">Sparklers</a></li>
         <li><a href="#">Assortments</a></li>
         <li class="newgroup"><a href="#">Online Store</a></li>
         <li><a href="#">Shopping Cart</a></li>
         <li><a href="#">View Your Account</a></li>
         <li><a href="#">Track Orders</a></li>
         <li><a href="#">Order History</a></li>
         <li class="newgroup"><a href="#">FAQ</a></li>
         <li><a href="#">Tech Support</a></li>
         <li><a href="#">Safety Manuals</a></li>
         <li><a href="#">Customer Service</a></li>
         <li><a href="#">Contact Us</a></li>
         <li class="newgroup"><a href="#">About Us</a></li>
         <li><a href="#">WW History</a></li>
         <li><a href="#">Fireworks Gallery</a></li>
         <li><a href="#">Fireworks Video</a></li>
         <li><a href="#">Reviews</a></li>
         <li><a href="#">Testimonials</a></li>
      </ul>
   </div>

   <div id="main">

      <h1>Retrieve Your Order History</h1>

      <p id="inputPara">
         <label id="userlabel" for="userid">Enter your user ID</label>
         <input type="text" id="userid" name="userid" />
         <label id="pwdlabel" for="pwd">Enter your password</label>
         <input type="password" id="pwd" name="pwd" />
         
         <input type="button" id="submitButton" value = "View Orders" />
      </p>

      <div id="orderhistory"></div>

   </div>

</body>

</html>

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 12
   Case Problem 1

   Filename: wwlibrary.js



   Functions List:

   addEvent(object, evName, fnName, cap)
      Adds an event handler to object where object is the object 
      reference, evName is the name of the event, fnName is the
      reference to the function, and cap specifies the
      capture phase.

   XMLHttpRequest()
      Creates a custom XMLHttpRequest object for IE browsers that
      do not support the native XMLHttpRequest object (chiefly
      IE5 and IE6)


*/

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

if (typeof XMLHttpRequest === "undefined") {
   XMLHttpRequest = function() {
      try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } 
      catch(e) { 
         try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } 
         catch(e) {
            try { return new ActiveXObject("Msxml2.XMLHTTP"); }
            catch(e) {
               try { return new ActiveXObject("Microsoft.XMLHTTP"); } 
               catch(e) {
                  throw new Error("Unable to create your request object"); 
               }
            }
         }
      }
   }
}

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 12

   Case Problem 1

   Author: Rachael Magnuson
   Date: May 11th, 2010   

   Filename: getorders.js



   Functions List:

   retrieveOrders()
      Retrieves the orders from the Web server and displays
      the HTML code in the orderhistory section of the
      document

*/
addEvent(window, "load", retrieveOrders, false);

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}



function retrieveOrders(){
	var user = document.getElementById("userid");
	var pwd = document.getElementById("pwd");
	var sButton = document.getElementById("submitButton");
	var orderHistory = document.getElementById("orderhistory");
	
	sButton.onclick = function() {
		var userValue =escape(user.value);
		var pwdValue = escape(pwd.value);
		
		if (userValue && pwdValue != ""){
			
			var reqOrders = new XMLHttpRequest();
			var reqURL ="/cgi-bin/wworders.pl?skey=" + userValue&pwdValue;
			reqOrders.open("GET", reqURL);
			reqOrders.send(null);
			
			reqOrders.onreadystatechange=function() {
				if (this.readyState ==4) {
					if (this.status == 200) {
						orderHistory.innerHTML = this.responseText;
					}
			} 
			}
		}
		}
	}

hi everybody,

i'm using JSE client-side site search engine to search in my page..

and this is the code:

Code:

var cookies = document.cookie;
var p = cookies.indexOf("d=");

if (p != -1) {
	var st = p + 2;
	var en = cookies.indexOf(";", st);
	if (en == -1) {
		en = cookies.length;
	}
	var d = cookies.substring(st, en);
	d = unescape(d);
}
var od = d;
var m = 0;
if (d.charAt(0) == '"' && d.charAt(d.length - 1) == '"') {
	m = 1;
}

var r = new Array();
var co = 0;

if (m == 0) {
	var woin = new Array();
	var w = d.split(" ");
	for (var a = 0; a < w.length; a++) {
		woin[a] = 0;
		if (w[a].charAt(0) == '-') {
			woin[a] = 1;
		}
	}
	for (var a = 0; a < w.length; a++) {
		w[a] = w[a].replace(/^\-|^\+/gi, "");
	}
	a = 0;
	for (var c = 0; c < s.length; c++) {
		pa = 0;
		nh = 0;
		for (var i = 0; i < woin.length; i++) {
			if (woin[i] == 0) {
				nh++;
				var pat = new RegExp(w[i], "i");
				var rn = s[c].search(pat);
				if (rn >= 0) {
					pa++;
				} else {
					pa = 0;
				}
			}
			if (woin[i] == 1) {
				var pat = new RegExp(w[i], "i");
				var rn = s[c].search(pat);
				if (rn >= 0) {
					pa = 0;
				}
			}
		}
		if (pa == nh) {
			r[a] = s[c];
			a++;
		}
	}
	co = a;
}

if (m == 1) {
	d = d.replace(/"/gi, "");
	var a = 0;
	var pat = new RegExp(d, "i");
	for (var c = 0; c < s.length; c++) {
		var rn = s[c].search(pat);
		if (rn >= 0) {
			r[a] = s[c];
			a++;
		}
	}
	co = a;

}


function return_query() {
	document.jse_Form.d.value = od;
}

function num_jse() {
	document.write(co);
}

function out_jse() {
	if (co == 0) {
		document.write('Your search did not match any documents.<p>Make sure all keywords are spelt correctly.<br>Try different or more general keywords.');
		return;
	}
	for (var a = 0; a < r.length; a++) {
		var os = r[a].split("^");
		if (bold == 1 && m == 1) {
			var br = "<b>" + d + "</b>";
			os[2] = os[2].replace(pat, br);
		}
		if (include_num == 1) {
			document.write(a + 1, '. <a href="', os[1], '">', os[0], '</a><br>', os[2], '<p>');
		} else {
			document.write('<a href="', os[1], '">', os[0], '</a><br>', os[2], '<p>');
		}
	}

}

i got it from http://www.javascriptkit.com/script/...se/index.shtml



but, in turkish alphabet the uppercase of "i" is "İ" with a dot..
and the lowercase of "I" is "ı" without a dot..

when i use the code above, it doesn't find "TEFSİR" if the user type it in lowercase as "tefsir"..
also doesn't find "Bayraklı" if the user type it all in uppercase as "BAYRAKLI"

is there a way to make this work?

please give me the code for checking the company name entered in textbox using javascript .Only sentence case to be allowed.Only abbreviations (without a full name) should not be allowed.(eg DPS) Abbreviations if any should be allowed only at the end of the name within ().eg Delhi Public School(DPS)

Hello.

I need to manipulate with a upper and lower case on STRINGS

For example I have string:

Code:

LALA_KAKA_mama_WIWI

I need to conwert it to

Code:

Lala_kaka_mama_wiwi

with first letter upper case.

Is it one simple way to do it with JS script/code?


Best Regards

I have a DIV that contains a sentence, call it Text_A. When a button is clicked, I would like to have Text_A replaced by Text_B.

Text_A = The sky is blue.
Text_B = The grass is green.

How would I do this with simple javascript?

A non-programmer thank you immensely.

Mike

Hi,

Any help would be greatly appreciated. Below is the javascript that I am having a problem with. The two id's in question are at the end of the javascript. fyi Its for a form.

What will happen is that the user selects the first dropdown with an id of 00N20000001HjsR. They then selects another dropdown with an id of 00N20000001Hp9Q.

What I want is that on the second dropdown, if the user selects the value of Beauty Therapy, it will change the value of the first dropdown (id 00N20000001HjsR) to 'ANCB'.

The problem I have at the moment is that it is not overriding the original dropdown selection. Any ideas on how to solve this?

Much appreciated in advance, thanks!!!


Code:

<script type="text/javascript">
//check if prospectus is on
document.formRec.onsubmit = function() { return ValidForm(); };

function ValidForm(){
		
	if (document.getElementById("first_name").value == ""){
		alert("Please enter your first name");
		document.getElementById("first_name").focus();
		return false;
	}

	if (document.getElementById("last_name").value == ""){
		alert("Please enter you last name");
		document.getElementById("last_name").focus();
		return false;
	}
	if (document.getElementById("email").value == ""){
		alert("Please enter your email address");
		document.getElementById("email").focus();
		return false;
	}
	if (document.getElementById("phone").value == ""){
		alert("Please enter your contact number");
		document.getElementById("phone").focus();
		return false;
	}
	
	if (document.getElementById('00N20000001Hp9a').value== "--None--"){
		alert("Please choose you country of citizenship");
		document.getElementById('00N20000001Hp9a').focus();
		return false;
	}
	
	if (document.getElementById('00N20000001HjsR').value== "--None--"){
		alert("Please select type of study you are interested in");
		document.getElementById('00N20000001HjsR').focus();
		return false; 					
	}
	
	
	switch (document.getElementById('00N20000001Hp9Q').value) {
		
		case "--None--":
		alert("Please select area of study you are interested in");
		document.getElementById('00N20000001Hp9Q').focus();
		return false; 		
		break;
		
		case "Beauty Therapy":
		document.getElementById('00N20000001Hp9Q').value = "Beauty Therapy";	
		document.getElementById('00N20000001HjsR').value = "ANCB";	
		break;

	}
	
	
	return true;
	
}

</script>

Hi, I believe this question has been asked by someone else before. However, it seems that the problem wasn't resolved. I'm having some trouble with the Switch Statements. My program runs without it so I know that the problem is here. I believe the logic is sound so it may be due to incorrect syntax.

I will appreciate if someone could take a look at my code below and guide me in the right direction.

Thank you.

The purpose of this function is to create bars, and the length of the bars is determined by the value of the "percent" variable (which is working fine) in the For loop after the Switch statements. The variable, "partyType" contains any of the text strings, such as "I", "D", etc.

Code:

function createBar(partyType,percent){
var barText;

switch(partyType){
case "D": 
barText="<td class='dem'></td>";
break;
case "R":
barText="<td class='rep'></td>";
break;
case "I":
barText="<td class='ind'></td>";
break;
case "G":
barText="<td class='green'></td>";
break;
case "L":
barText="<td class='lib'></td>";
break;
default: document.write("hi");
}

for(var i=1; i<percent; i++){
document.write(barText);
}
}
}

Hi,

I'm doing some experimenting. So this may look bad to javascript experts here. But I'm trying to learn.

I have a header div that will show a larger image when the user mouses over each thumbnail image. I used jQuery to create this effect. The header div contains a button. Once the button is clicked, an alert will pop up to tell the user the artist's name of image. The button is wired to an ID of a paragraph. Problem is, my code is not working. I don't want to use "onclick" inline javascript (which is what I am using to call the showArtistname() function). I want unobtrusive javascript like jQuery is. I'm not sure how to do this. I don't know if I should use an array or if I'm even approaching this correctly. Well, it's not correct, because it's not working...

Here is my jQuery code:

Code:

$(function(){
$("a:has(img.small)").mouseover(function(){
var bigImage= $(this).attr("href");
$("#heading").attr({src: bigImage});
return false;
});

});

here is my javascript code:

Code:

function showArtistname(){ 

var a = document.getElementById("bluesails", "purplemountains", "bigsky", "nightlights", "fireysunset", "brilliantsunrise").innerHTML;


switch(a) {
	case "bluesails":
		alert("Arthur MacKenzie")
		break
	case "purplemountains":
		alert("Maggie Laing")
		break
		
	case "bigsky":
		alert("Arthur MacKenzie")
		break
		
	case "nightlights":
		alert("Aria Soriano")
		break
		
	case "fireysunset":
		alert("Felix Buckley")
		break
		
	case "brilliantsunrise":
		alert("Felix Buckley")
			
}
}

Here is the HTML:


Code:

<div class="container_12" id="_container">

  	<div class="grid_12" id="12_header" > 
    	
        <div class="hc_left_pic"> <images/01_md.jpg" id="heading" alt="Big Image." />
    <div id="showImage" onclick="showArtistname()"></div>
  </a></div> 
 	</div>


       
  	<div class="clear"></div> 
    
    
    
  	
  <div class="grid_4" id="artist_container1">
    <a href="images/01_md.jpg"><img src="images/01_sm.jpg" width="100" height="100" class="small" alt="Small image Blue Sails" /></a>    
  		<p class="text" id="bluesails">Blue Sails</p>
  </div>
  
  
  <div class="grid_4" id="artist_container2">
  <a href="images/02_md.jpg"><img src="images/02_sm.jpg" width="100" height="100" class="small" alt="Small Image Purple Mountains"/></a>
    	<p class="text" id="purplemountains">Purple Mountains</p>
  </div>
  
  
  <div class="grid_4" id="artist_container3">
  <a href="images/03_md.jpg"><img src="images/03_sm.jpg" width="100" height="100" class="small" alt="Small Image Big Sky"/></a>
    	<p class="text" id="bigsky">Big Sky</p>
  </div>
  
  
  <div class="clear"></div>
  
  
  <div class="grid_4" id="artist_container4">
  <a href="images/04_md.jpg"><img src="images/04_sm.jpg" width="100" height="100" class="small" alt="Small Image Night Lights" /></a>
    	<p class="text" id="nightlights">Night Lights</p>
  </div>
    
    
  <div class="grid_4" id="artist_container5">
  <a href="images/05_md.jpg"><img src="images/05_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Firey Sunset"/></a>
    	<p class="text" id="fireysunset">Firey Sunset</p>
  </div>
  	
    
  <div class="grid_4" id="artist_container6">
  <a href="images/06_md.jpg"><img src="images/06_sm.jpg" width="100" height="100" class="small"  alt="Small Product Image Brilliant Sunrise"/></a>
    	<p class="text" id="brilliantsunrise">Brilliant Sunrise</p>
</div>

Here's the CSS:


Code:

.container_12 .grid_4 {
  width: 274px;
  height: 370px;
  background-color:#ccc;
  border: 3px solid #999;
  padding-left:10px;
  padding-right:10px;:confused:
  padding-bottom:10px;
}


#showImage{
margin: -170px 20px 80px 700px;
width: 176px;
height: 48px;  
background:url(../images/showimage.jpg);
position:relative;
z-index:100;
}

.grid_4 img {
position:relative;
left:100px;
top:20px;
padding:0 0 60px 0;
border:none;

}
.grid_4 p {
position:relative;
text-align:center;
}

p.text {
font-family:Arial, Helvetica, sans-serif;
font-size:.75em;
color:#000;
line-height:1.25em;
font-weight:bold;
}


#12_header {
display: inline;
background-color:#e5e5e5;
border: 3px solid #bfbfbf;
height:225px;
font-family:Arial, Helvetica, sans-serif;
font-size:;
color:#000;
font-weight:bold;
line-height:1.2em;

}


.hc_left_pic {
float:left; 
margin-top:15px;
background-color:#e5e5e5;
border: 3px solid #bfbfbf; 
width:935px;
height:250px;

}

I'm fairly new to javascript and would appreciate any help offered. I'm trying to use the input from an HTML form to interact with a switch statement in javascript. I want my users to input a few specific words, and have each word they input redirect them to a specific page.

Below is what I've currently come up with. I cannot get it to function properly as it continues to display the default output regardless of the input

Code:

 <script language="JavaScript" type="text/javascript" > 
    <!--
function checkform ( form )
{
    var favcolour =("form.data", "")
    switch (favcolour) {
      case "red":
        window.location="index.html";
        break;
      case "green":
        window.location="index.html#tips";
        break;
      case "blue":
        window.location="index.html#blue";
        break;
      default:
        document.writeln("Invalid Input");
      };
	  }
    // -->
  </script>
 </head>
 <body>
 <form action="" method="post" onsubmit="return checkform(this);"> 
  <input type="text" name="data" />

Again any help would be greatly appreciated!

Writing Table Cells and Switch Statements

I am to create a function and purpose is to write blank tables cells to make up horizontal bar. function will have 2 parameters=(partyType and percent

partyType parameter stores variables of D,R,I,G or L

percent parameter store percentage rounded to nearest integer

so I am to make a switch and break statements /commands

then have to create a For Loop in counter variable goes up from 1 through value of parmeter increments of 1

heres the code I created for this one
Code:

     function createBar(partyType,percent){ // script element to create blank cells
switch(partyType) {
case "D": document.write("<td class='dem'></td>");
break;
case "E": document.write("<td class='rep'></td>");
break;
case "I": document.write("<td class='ind'></td>");
break;
case "G": document.write("<td class='green'></td>");
break;
case "L": document.write("<td class='lib'></td>");
break;
}
var barText = partyType

for (i=0; i < percent; i++)
{
document.write(barText);

So what improvements should I make?
should my loop be before everything?
Thanks

Dear Experts

Var str="this is a string"

I want to know how to replace this with Uppercase while using regular expression.

Please help