Temperature converter

Question

anthony5557 0 Light Poster

13 Years Ago

I need some help with the javascript code. I have the structure down I need help with the functions. I want to enter the temp in the box and the run the function and replace the number with the converted temperature. Can anyone help me. Here is where I'm at so far. Its almost all done just need help with the end. Here is my 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">



<!-- homework 9.19 -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title> Fahrenheit and Celsius Converter </title>

<script type = "text/javascript">

//make convertC function
function convertC()
{

  //get the number form field
var field1 = document.getElementById("Celsius");
var temp1 = parseFloat(field1.value);
var answer1 = 0;

answer1 = (5.0/9.0) * (temp1 - 32);

return answer1;
}

//make converF funtion
function convertF()
{
var field2 = document.getElementById("Fahrenheit");
var temp2 = parseFloat(field2.value);
var answer2 = 0;

answer2 = (9.0/5.0) * (temp2 + 32);

return answer2;
}
</script>

</head>

<body>

<h1> Fahrenheit and Celsius Converter </h1>

<table border = "1" width = "35%"

<thead>

<tr>

  <td>Fahrenheit</td>
  <td><input Celsius = "Celsius" type = "text" size = "25" /></td>
  <td><input type = "button" value = "Convert to Celsius"
        onclick = "convertC()" </td>
</tr>
<tr>
  <td>Celsius</td>
  <td><input Fahrenheit = "Fahrenheit" type = "text" size = "25" /></td>
  <td><input type = "button" value = "Convert to Fahrenheit" 
        onclick = "convertF()"</td>
</tr>

</table>

</body>

</html>

xml

2 Contributors
8 Replies
226 Views
18 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by hielo

hielo 65 Veteran Poster

13 Years Ago

<input Fahrenheit = "Fahrenheit" ..> should be: <input [B]id[/B] = "Fahrenheit" ..> The same goes for the other input. Also, this is wrong:
answer2 = (9.0/5.0) * (temp2 + 32);

You need to add 32 AFTER the multiplication. Lastly, if you are executing convertC() simply returning the result is useless because you are not displaying anywhere. You should be assigning the result do the Fahrenheit input. The same goes for the other function.

<?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">



<!-- homework 9.19 -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title> Fahrenheit and Celsius Converter </title>

<script type = "text/javascript">

//make convertC function
function convertC()
{

  //get the number form field
var field1 = document.getElementById("Celsius");
var temp1 = parseFloat(field1.value);
var answer1 = 0;

answer1 = (5.0/9.0) * (temp1 - 32);
 document.getElementById("Fahrenheit").value=answer1.toFixed(1);
return answer1;
}

//make converF funtion
function convertF()
{
var field2 = document.getElementById("Fahrenheit");
var temp2 = parseFloat(field2.value);
var answer2 = 0;

answer2 = (9.0/5.0) * (temp2 + 32);
document.getElementById("Celsius").value=answer2.toFixed(1);
return answer2;
}
</script>

</head>

<body>

<h1> Fahrenheit and Celsius Converter </h1>

<table border = "1" width = "35%">

<thead>

<tr>

  <td>Fahrenheit</td>
  <td><input id = "Celsius" type = "text" size = "25" /></td>
  <td><input type = "button" value = "Convert to Celsius"
        onclick = "convertC()" </td>
</tr>
<tr>
  <td>Celsius</td>
  <td><input id = "Fahrenheit" type = "text" size = "25" /></td>
  <td><input type = "button" value = "Convert to Fahrenheit" 
        onclick = "convertF()"</td>
</tr>

</table>

</body>

</html>

hielo 65 Veteran Poster

13 Years Ago

Look at line 27 on your ORIGINAL post. There you are computing the answer and assigning it to answer1.

On line 29 you are returning the computed result (the converted temperature value). What I am suggesting is that on line 28 you add:
document.getElementById("Fahrenheit").value=answer1;

The same logic applies for the other function. Look at my previous post.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anthony5557 0 Light Poster · Answer 1 · 2011-01-24T11:30:17+00:00

I'm not sure I understand what you are saying. How do I calculate and input the answer into the second box?

anthony5557 0 Light Poster · Answer 2 · 2011-01-24T12:03:50+00:00

I tried that. It still doesn't sent he answer into the second box. This is really messing with me. I can make the answer box but I don't know how to put anything in it.

hielo 65 Veteran Poster · Answer 3 · 2011-01-24T12:36:17+00:00

<?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">



<!-- homework 9.19 -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title> Fahrenheit and Celsius Converter </title>

<script type = "text/javascript">

//make convertC function
function convertC()
{

  //get the number form field
var field1 = document.getElementById("Celsius");
var temp1 = parseFloat(field1.value);
var answer1 = 0;

answer1 = (5.0/9.0) * (temp1 - 32);
 document.getElementById("Fahrenheit").value=answer1.toFixed(1);
return answer1;
}

//make converF funtion
function convertF()
{
var field2 = document.getElementById("Fahrenheit");
var temp2 = parseFloat(field2.value);
var answer2 = 0;

answer2 = (9.0/5.0) * (temp2 )+ 32;
document.getElementById("Celsius").value=answer2.toFixed(1);
return answer2;
}
</script>

</head>

<body>

<h1> Fahrenheit and Celsius Converter </h1>

<table border = "1" width = "35%">

<thead>

<tr>

  <td>Fahrenheit</td>
  <td><input id = "Celsius" type = "text" size = "25" /></td>
  <td><input type = "button" value = "Convert to Celsius"
        onclick = "convertC()" </td>
</tr>
<tr>
  <td>Celsius</td>
  <td><input id = "Fahrenheit" type = "text" size = "25" /></td>
  <td><input type = "button" value = "Convert to Fahrenheit" 
        onclick = "convertF()"</td>
</tr>

</table>

</body>

</html>

anthony5557 0 Light Poster · Answer 4 · 2011-01-24T12:49:27+00:00

Thank you I was doing something real weird I think. I don't think I understand the getElementId.value thing all the way yet. I appreciate the help. If you have anymore advice it would be taken graciously.

anthony5557 0 Light Poster · Answer 5 · 2011-01-24T12:50:50+00:00

why do you put toFixed(1). why is the 1 in the ()?

hielo 65 Veteran Poster · Answer 6 · 2011-01-24T22:51:22+00:00

//I you had:
//<input type="text" id="email" name="emailAddress">
//then 
var x = document.getElementById('email');

//will cause x to have a REFERENCE to the element whose id="email"
//which in this case is your <INPUT> with name="emailAddress"
//NOTICE: You must use the value of the id NOT the value of name
//for this reason, an id MUST be unique throughout the document.
//
//now that x holds a reference to x, you can retrieve its properties
alert( x.value );
alert( x.id );
alert( x.name );
alert( x.type );

//you can assign a new value to it, like a string:
x.value="hello"

//or even a number
var PI=3.141
x.value = PI;

//of a number to 1 decimal place
x.value = PI.toFixed(1);

Strictly speaking, you are NOT required to save the reference onto another variable first:

//saving onto x is optional
var x = document.getElementById('email');

//if you are going to be needing or using a single property for a given element, 
//it may be easier/"more convenient" to access the property immediately
document.getElementById('email').value="Howdy";

//the script engine first figures out that document.getElementById('email') is a 
//reference to the element with id="email", then it accesses its value property 
//and assigns it "Howdy"