JS Assignment

Hello;

Im very new to JS, Im currently studing this subject. I have to hand in an assignment, Im completely stuck on how to get the script to work, or even if i am on the right track or not.

I was wondering if anyone could possibly help me out a little to get on the right path to getting my script to work?

I would simply prefer to email the script in a zip format to anyone who is willing to take a look at it, and send me your comments.

Its only a temp conversion script

my email is CLICK HERE (shanhac@hotmail.com)
I guess to make it easier on anyone who may be able to help I will just add the codes here. I am using an external JS file to execute the code, I would prefer to use the pasefloat function (as I think it may be neater and better) Because Im so so new, I am having trouble trying to put it all together, I have added the HTML I have done for this JS file at the bottom:

/*
This file cantains Javascript language refinements and/or shortcuts
File: tempconversion.js
Author:
Date: July, 2010
Purpose: JavaScript for Temperature Conversion Tool
*/
/*
CelsiusTOKALVIN = [°C] + 273.15
FahrenheitTOKALVIN = ([°F] + 459.67) × 5/9
RankineTOKALVIN = [°R] × 5/9
DelisleTOKALVIN = 373.15 - [°De] × 2/3
NewtonTOKALVIN = [°N] × 100/33 + 273.15
RéaumurTOKALVIN = [°Ré] × 5/4 + 273.15
RømerTOKALVIN = ([°Rø] - 7.5) × 40/21 + 273.15
KalvinToCelsius [°C] = [K] - 273.15
KalvinToFahrenheit [°F] = [K] × 9/5 - 459.67
KalvinToRankine [°R] = [K] × 9/5
KalvinToDelisle [°De] = (373.15 - [K]) × 3/2
KalvinToNewton [°N] = ([K] - 273.15) × 33/100
KalvinToRéaumur [°Ré] = ([K] - 273.15) × 4/5
KalvinToRømer [°Rø] = ([K] - 273.15) × 21/40 + 7.5

*/

var convert = function(){
var output = '';
var result = 0;
var temp = $('temp1').value;
var temp = $('temp2').value;
var source = $('source').selectedIndex;
var target = $('target').selectedIndex;
temp = parseFloat(temp);
var cToK = cToK(temp); //temp + 273.15;
var fToK = fToK(temp); //(temp + 459.67) * 5/9;
var deToK = deToK(temp); //373.15 - temp * 2/3;
var nToK = nToK(temp); //temp * 100/33 + 273.15;
var reToK = reToK(temp); //temp * 5/4 + 273.15;
var roToK = roToK(temp); //(temp - 7.5) * 40/21 + 273.15;
var rToK = rToK(temp); //temp × 5/9;
var KToc = Ktoc(temp); //temp - 273.15;
var KTof = KTof(temp); //temp × 9/5 - 459.67;
var KTor = KTor(temp); //temp × 9/5;
var KTode = KTode(temp); //(373.15 - temp) × 3/2;
var KTon = KTon(temp); //(temp - 273.15) × 33/100;
var KTore = KTore(temp); //(temp - 273.15) × 4/5;
var KToro = KToro(temp); //(temp - 273.15) × 21/40 + 7.5;
var tempFinal = 0;



if (target == 1){
// from celsius to Fahrenheit
// so convert k to f
output = output + KTof(temp);
} else if (target == 2){
// from celsius to Kelvin
// now convert c to k
output = output + cToK(temp);
} else if (target == 3){
// from celsius to Delisle
output = output + KTode(temp);
} else if (target == 4){
// from celsius to Newton
output = output + KTon(temp);
} else if (target == 5){
// from celsius to Réaumur
output = output + KTore(temp);
} else if (target == 6){
// from celsius to Rømer
output = output + Ktoro(temp);
} else if (target == 7){
// from celsius to Rankine
output = output + KTor(temp);
} else {
// can't do
output = 'Two different temperature scales must be chosen';
}

/*if (target == 2){
// from celsius to Fahrenheit
// so convert k to f
output = output + kToF(temp);
} else if (target == 2){
// from celsius to Kelvin
output = output + cToK(temp);
} else if (target == 3){
// from celsius to Delisle
output = output + deToK(temp);
} else if (target == 4){
// from celsius to Newton
output = output + nToK(temp);
} else if (target == 5){
// from celsius to Réaumur
output = output + reToK(temp);
} else if (target == 6){
// from celsius to Rømer
output = output + roToK(temp);
} else if (target == 7){
// from celsius to Rankine
output = output + rToK(temp);
} else {
// can't do
}
*/

output = temp + $('source').value + ' = ' + $('target').value;
alert(output);
$('output').innerHTML = output;
}

var KTof = function(K){
return parseFloat (K) * 9/5 - 459.67;
}

var KToc = function(K){
return parseFloat(K) - 273.15;
}

var KTor = function(K){
return parseFloat(K) * 9/5;
}

var KTode = function(K){
return parseFloat (373.15 -(K)) * 3/2;
}

var KTon = function(K){
return parseFloat((K) - 273.15) * 33/100;
}

var KTore = function(K){
return (parseFloat(K) - 273.15) * 4/5;
}

var KToro = function(K){
return (parseFloat(K) - 273.15) * 21/40 + 7.5;
}

var fToK function (f){
return (parseFloat(f) + 459.67) *5/9;
}

var cToK = function (c){
return parseFloat(c) +273.15;
}

var deToK = function (de){
return parseFloat(de) 373.15 - *2/3;
}

var nToK = function (n){
return parseFloat(n) * 100/33 +273.15;
}

var reToK = function (re){
return parseFloat(re) * 5/4 +273.15;
}

var roToK = function (ro){
return parseFloat(ro) (- 7.5) * 40/21 +273.15;
}



// register the buttons click event
// using property or traditional method

$('btn').onclick = convert;









<!DOCTYPE XHTML PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<title> Temperature Conversion Tool </title>


<script type= "text/javascript" src="jsUtil.js"></script>
<script type= "text/javascript" defer = "defer" src="tempconversion.js"></script>
<script type= "text/javascript" defer = "defer">

//<![CDATA[

/*
File: tempconversion.html
Author:
Date: 2010
Purpose: Convert Temperature


JavaScript template
*/


function changecolor(code) {

document.bgColor=code
}

//]]>

</script>
</head>
<body bgcolor="white">
<label for ="colorchange"> CHOOSE A BACKGROUND COLOR!</label><br/>
<input type="button" name="Button1" value="Red" onclick="changecolor('red')">
<input type="button" name="Button2" value="Green" onclick="changecolor('green')">
<input type="button" name="Button3" value="Blue" onclick="changecolor('blue')">
<input type="button" name="Button4" value="White" onclick="changecolor('white')">


<h2 align="center">Temperature Conversion Tool</h2>





<div id="box" style="position:absolute ;

left:400px;
top:150px;
width:450px;
height:200px;
background-color:#cecece;
padding:20px;
font-size:1.2em;
">

<label for="temp1">From: </label><br/>
<input id="temp1" name="temp1" type="text" value="0.0"
maxlength="10" size="10" title="Enter a temperature" />
<select id="source" name="source">
<option value="c" selected>Celsius</option>
<option value="f">Fahrenheit</option>
<option value="k">Kelvin</option>
<option value="de">Delisle</option>
<option value="n">Newton</option>
<option value="re">Réaumur</option>
<option value="ro">Rømer</option>
<option value="r">Rankine</option>
</select>


<label for="temp2">To: </label>
<input id = "temp2" name = "temp2" type ="text" value = "0.0"
maxlength = "10" size = "10" title = "Enter a temperature" />
<select id = "target" name = "target">
<option value = "c" selected>Celsius</option>
<option value = "f" >Fahrenheit</option>
<option value = "k" >Kelvin</option>
<option value = "de" >Delisle</option>
<option value = "n" >Newton</option>
<option value = "re" >Réaumur</option>
<option value = "ro" >Rømer</option>
<option value = "r" >Rankine</option>
</select>

<br/><br/>


<center><input id="btn" name="btn" type="button" value="Convert" /></center>
<br /><br />


<div id="output" name="output"
style="background-color:#000000;color:#ffffff;">
Results supposed to display here, But its not!!
</div>

</div>
<noscript>
<h3>This site requires JavaScript</h3>
<p>Please turn JavaScript support on.</p>
To learn how to setup JavaScript see this page.&nbsp;
<a href="browserSettings.html" alt="Set up JavaScript"
title="Link to a page with instructions for setting up JavaScript">
Set up JavaScript</a>.
</noscript>

</body>
</html>




I have commented out some stuff in the JS, as Im not too sure how to make them fit in just yet and configure them...
Thanks

An obvious error:-

var temp = $('temp1').value;
var temp = $('temp2').value; // so which is it?

var cToK = cToK(temp); //temp + 273.15;
You cannot have a function and a variable with the same name.
You want simply
temp = parseFloat(temp);
var cToK = temp + 273.15;
and so on - no need for all the conversion functions.

if (target == 1){
I don't see where target is defined.

Have you tried using the Firebug debugger?

As so often with beginners, your script is enormously long-winded and over-complicated. KISS! I would toss that code and start over.


Quizmaster: What is the name of the notorious island prison in San Francisco Bay that closed in 1963 and is now a top visitor attraction?
Contestant: Guantanemo bay.

Hi and thanks for your reply.

The temp1 and temp2 applies to the HTML for the 'From' and 'To' values. So this would be wrong then?

I wasnt too sure about all the variables, I tried just quoting them out but I still got no kind of output.

I have tried the firebug, its always asking fo ; in the parsefloat always before the parsefloat....

Arggg its really hard to understand this JS.. lol But its part of my classes and I know its going to be good to know, but I have been pretty stressed over it.

Anyways, if there is anyother help of tips you can help with I would appreciate it.

Do I have this right - as the target == 1 refers to Fahrenheit in the HTML file. I need to create all these for the 8 temps right? i.e: Fahrenheit to celsius and so forth.



if (target == 1){
// from celsius to Fahrenheit
// so convert k to f
output = output + KTof(temp);
} else if (target == 2){
// from celsius to Kelvin
// now convert c to k
output = output + cToK(temp);
} else if (target == 3){
// from celsius to Delisle
output = output + KTode(temp);
} else if (target == 4){
// from celsius to Newton
output = output + KTon(temp);
} else if (target == 5){
// from celsius to Réaumur
output = output + KTore(temp);
} else if (target == 6){
// from celsius to Rømer
output = output + Ktoro(temp);
} else if (target == 7){
// from celsius to Rankine
output = output + KTor(temp);
} else {
// can't do
output = 'Two different temperature scales must be chosen';




What I wanted to achive was to convert all to Kalvin first then hopefully covert everything from kalvin, and then hope to be able to use either way to convert no matter if I choose From (Source) or To(Target) first. If that makes any sense at all :rolleyes:


cheers



An obvious error:-

var temp = $('temp1').value;
var temp = $('temp2').value; // so which is it?

var cToK = cToK(temp); //temp + 273.15;
You cannot have a function and a variable with the same name.
You want simply
temp = parseFloat(temp);
var cToK = temp + 273.15;
and so on - no need for all the conversion functions.

if (target == 1){
I don't see where target is defined.

Have you tried using the Firebug debugger?

As so often with beginners, your script is enormously long-winded and over-complicated. KISS! I would toss that code and start over.


Quizmaster: What is the name of the notorious island prison in San Francisco Bay that closed in 1963 and is now a top visitor attraction?
Contestant: Guantanemo bay.

I have knocked up the following skeleton which you can extend for the remaining conversion values. We are not supposed to do your (complete) homework for you. And don't try to be too clever when "I'm very new to JS, Im currently studing this subject." :)


<form name = "myform">
Enter a temperature <input type = "text" name = "temperature">
<select name = "from">
<option value = "0"> Convert FROM</option>
<option value = "1"> Fahrenheit </option>
<option value = "2"> Celcius </option>
<option value = "3"> Kelvin </option>
</select>

<select name = "to" onchange = "calc()">
<option value = "0"> Convert TO</option>
<option value = "1"> Fahrenheit </option>
<option value = "2"> Celcius </option>
<option value = "3"> Kelvin </option>
</select>

<br>

Result: <input type = "text" name = "result" readonly>

</form>

<script type = "text/javascript">
function calc() {
var r = ""; // result
document.myform.result.value = r; //clear the field
var tmp = parseFloat(document.myform.temperature.value);
if (isNaN(tmp) || tmp == null || tmp == "") {
alert ("You must enter a numeric value for temperature");
document.myform.temperature.value = "";
return false;
}

var f = parseInt(document.myform.from.value);
var t = parseInt(document.myform.to.value);
if (f==t) {
alert ("You cannot convert to the same scale!");
return false;
}

if (f==0 || t==0) { // From and/or To scale not selected
alert ("You must choose a temperature scale to convert from/to");
return false;
}

if (f == 1) { // from Fahrenheit
switch (t) {
case 2: r = (tmp - 32) *5/9; break; // To Celcius
case 3: r = (tmp - 32) *5/9 +272; break; // To Kelvin
}
}

// and so on for other values of f


document.myform.result.value = r;
}
</script>

It is not a good idea to use the name "temp" as short for "temperature" as the convention is that temp is short for a temporary variable.

You could certainly short-circuit this by doing it in two steps as you suggest:

a) convert the input value temperature value to degrees Kelvin depending on the value of "from" using switch statements

var intermediate = 0;
switch (f) {
case 1: intermediate = (tmp - 32) *5/9 +272; break; // Fahrenheit to Kelvin
// case 2: // Celcius to Kelvin
// case 3: // Another scale to Kelvin
// case 4: // Yet another scale to Kelvin
}

b) convert this intermediate value to the scale desired in "to", again using switch statements.

This assumes no loss of accuracy in making two calculations.

Thanks for your help, Trust me, I do prefer to learn mostly on my own, Im just struggling to understand it all.

I am currently going over your code, I have been making some changes to my code etc... Im now getting an output. Not the right one of course, but after so long, its an output... lol I will keep hacking away at it and see if Ican get it to work.

Thanks again.

Hello Phillip.

I have been working hard to get this complete, I think I am almost there... Would you mind taking a look and helping me understand why its not completely working.

Also I dont know how to get it to automatically show up in the 'To' (t) Tmp, when the 'From' / 'Source (s) has been entered in. Any Ideas. ( I havent actually been shown this yet, but I want it to appear when the first tmp is placed in and the button is clicked.

If you could test it, you will see what I mean. What am I missing? I keep getting the alert pop ups asking ''You must choose a temperature scale to convert from/to' and 'You must enter a numeric value for temperature'...


Here are the JS(external code) and the HTML. As with the other file thats required for it.


JS
/*
This file cantains Javascript language
File: tempconversion.js

*/


function convert(){
var output = '';
var result = 0;
var s = $('s').value;
s = parseFloat(s);
var t = $('t').value;
t = parseFloat(t);
var Ftmp = $('Ftmp').value;
Ftmp = parseFloat(Ftmp);
var Ttmp = $('Ttmp').value;
Ttmp = parseFloat(Ttmp);
var intermediate = 0;




switch ($('s').value) {
case 'F': intermediate = fToK(Ftmp); break; // Fahrenheit to Kelvin
case 'C': result = cToK(Ftmp); break; // To Kelvin
case 'DE': result = deToK(Ftmp); break; // To Kelvin
case 'N': result = nToK(Ftmp); break; //To Kelvin
case 'RE': result = reToK(Ftmp); break; //To Kelvin
case 'RO': result = roToK(Ftmp); break; //To Kelvin
case 'R': result = rToK(Ftmp); break; //To Kelvin


default: result = 'Cant be done'; break;

}

$('s').value = result;


if ($('Ttmp').value = ''){
// absolute zero
return "Absolute Zero";
}



switch ($('t').value) {

case 'F': intermediate = fToK(Ttmp); break; // ToFahrenheit
case 'C': result = KToc(Ttmp); break; // To Celcius
case 'DE': result = KTode(Ttmp); break; // To DE
case 'N': result = KTon(Ttmp); break; //To Newton
case 'RE': result = KTore(Ttmp); break; //To Reaumur
case 'RO': result = KToro(Ttmp); break; //To Romer
case 'R': result = KTor(Ttmp); break; //To Rankine

default: result = 'Cant be done'; break;

}

$('t').value = result;





if ($('Ftmp').value == 0 || $('Ttmp').value == 0) { // Source and/or To scale not selected
alert ('You must choose a temperature scale to convert from/to');

}



if ('FTmp' || 'FTmp' == null || 'FTmp' == '') {
alert ('You must enter a numeric value for temperature');
$('Ftmp').value = '';


}

if (isNaN($('Ttmp').value || $('Ttmp').value == null || $('Ttmp').value == '')) {
alert ('You must enter a numeric value for temperature');
Ttmp = '';


}


if ($('Ftmp').value === $('Ttmp').value) {
alert ('You cannot convert to the same scale!');

}




output = ( + $('Ftmp').value + $('s').value + ' = ' + $('t').value + $('Ttmp').value + result);
alert(output);
$('output').innerHTML = output;

}







var KTof = function(K){
return parseFloat(K) * 9/5 - 459.67;
}

var KToc = function(K){
return parseFloat(K) - 273.15;
}

var KTor = function(K){
return parseFloat(K) * 9/5;
}

var KTode = function(K){
return parseFloat (373.15 -(K)) * 3/2;
}

var KTon = function(K){
return parseFloat((K) - 273.15) * 33/100;
}

var KTore = function(K){
return (parseFloat(K) - 273.15) * 4/5;
}

var KToro = function(K){
return (parseFloat(K) - 273.15) * 21/40 + 7.5;
}

var fToK = function (f){
return (parseFloat(f) + 459.67) *5/9;
}

var cToK= function (c){
return parseFloat(c) +273.15;
}

var deToK = function (de){
return parseFloat; 373.15 - (de)*2/3;
}

var nToK = function (n){
return parseFloat(n) * 100/33 +273.15;
}

var reToK = function (re){
return parseFloat(re) * 5/4 +273.15;
}

var roToK = function (ro){
return parseFloat(ro) (- 7.5) * 40/21 +273.15;
}

var rToK = function (r) {
return parseFloat (r) * 5/9;
}


// register the buttons click event
// using property or traditional method

$('btn').onclick = convert;




HTML

<!DOCTYPE XHTML PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html>
<head>
<title> Temperature Conversion Tool </title>


<script type= "text/javascript" src="jsUtil.js"></script>
<script type= "text/javascript" defer = "defer" src="tempconversion.js"></script>
<script type= "text/javascript" defer = "defer">

//<![CDATA[

/*
File: tempconversion.html
Author:
Date: 2010
Purpose: Convert Temperature



*/


function changecolor(code) {

document.bgColor=code
}

//]]>

</script>
</head>
<body bgcolor="white">
<label for ="colorchange"> CHOOSE A BACKGROUND COLOR!</label><br/>
<input type="button" name="Button1" value="Red" onclick="changecolor('red')">
<input type="button" name="Button2" value="Green" onclick="changecolor('green')">
<input type="button" name="Button3" value="Blue" onclick="changecolor('blue')">
<input type="button" name="Button4" value="White" onclick="changecolor('white')">


<h2 align="center">Temperature Conversion Tool</h2>

<form name = "form"/>



<div id="box" style="position:absolute ;

left:400px;
top:150px;
width:450px;
height:200px;
background-color:#cecece;
padding:20px;
font-size:1.2em;
">

<label for="Ftmp">From: </label><br/>
<input id="Ftmp" name="Ftmp" type="text" value="0.0"
maxlength="10" size="10" title="Enter a temperature" />
<select id="s" name="source">
<option value = "C" selected>Celsius</option>
<option value = "F">Fahrenheit</option>
<option value = "K">Kelvin</option>
<option value = "DE">Delisle</option>
<option value = "N">Newton</option>
<option value = "RE">Réaumur</option>
<option value = "RO">Rømer</option>
<option value = "R">Rankine</option>
</select>


<label for="Ttmp">To: </label>
<input id = "Ttmp" name = "Ttmp" type ="text" value = "0.0"
maxlength = "10" size = "10" title = "Enter a temperature" />
<select id = "t" name = "target">
<option value = "C" selected>Celsius</option>
<option value = "F" >Fahrenheit</option>
<option value = "K" >Kelvin</option>
<option value = "DE" >Delisle</option>
<option value = "N" >Newton</option>
<option value = "RE" >Réaumur</option>
<option value = "RO" >Rømer</option>
<option value = "R" >Rankine</option>
</select>

<br/><br/>


<center><input id="btn" name="btn" type="button" value="Convert" /></center>
<br /><br />


<div id="output" name="output"
style="background-color:#000000;color:#ffffff;">
Results supposed to display here, But its not!!
</div>

</div>
<noscript>
<h3>This site requires JavaScript</h3>
<p>Please turn JavaScript support on.</p>
To learn how to setup JavaScript see this page.&nbsp;
<a href="browserSettings.html" alt="Set up JavaScript"
title="Link to a page with instructions for setting up JavaScript">
Set up JavaScript</a>.
</noscript>

</body>
</html>




Extra JS File

/*
This file contains JavaScript language refinements and/or shortcuts
Author:
Date: Sept, 2010
*/

/*
The $ function is an alias for document.getElementById
USAGE:
$('temp').innerHTML = (20 + 40) / 2;
This is a function literal
function $(id){
return document.getElementById(id);
}
*/

var $ = function (id){
return document.getElementById(id);
}




Your help is very much appreciated. Thank you in advanced.

To cause a function to run when a select option is selected:-

<select id = "t" name = "target" onchange = "myFunction()">

In the code I gave you:-

<select name = "to" onchange = "calc()">


For the rest, you seem to have disregarded my advice to keep it simple. The code I gave you above works fine if you fill in all the missing scales (I only did Fahrenheit to Celcius and Kelvin).

Your functions e.g.
var KTof = function(K){
return parseFloat(K) * 9/5 - 459.67;
}

just add cost and not value as businessmen say.

<form name = "form"/> is simply asking for trouble.


My advice is:-

a) put in alerts at stategic locations to trace what is happening
b) use the error console (Firebug).

OMG I meant to remove that!!! <form name = "form"/> is simply asking for trouble. oops!

Cheers, I will go over it again. I am not always getting the errors in the Firbug, which is a shame, cause I dont know where Im going wrong.

mmmmm um I will see what I can come up with, and hey, I thought it looks more simple!, I thought it was better then all the 'if and else' statements that would more then likely have to put in at least 68 times. Which I wanted to avoid. But your reply, It looks as though I could make it even more simplier, I dont know how, Anyways, if I cant get it done Im just going to hand it in. Then Im sure to get the feedback from my teacher.... Its been a real learnign curve for me.... lol

Thanks again for replying, I do appreciate it.

I'm going to stick my nose in here and recommend a strategy:

*ALWAYS* convert the FROM value to Celcius.

*THEN* convert the Celcius to the needed TO value.

In other words, always do two conversions.

Now you don't need to have weird things like Rankin-to-Newton. You do need Rankin-to-Celcius and then Celcius-to-Newton. But that drastically reduces the number of different functions or conversions, whichever way you go.