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>
Attachments tempera.JPG 28.46 KB

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

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

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.

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.

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

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.

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

Edited 5 Years Ago by hielo: n/a

This article has been dead for over six months. Start a new discussion instead.