Script Help

Brian · Oct 19, 2004

Help..

We cannot get this script to work..can someone take a look at it and make
suggestions?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Convert Temperature</title>
<script language="javascript">

</script>
</head>
<body><pre>
<h1>Convert Temperature</h1>
<h3>Enter the temperature in Celcius</h3>
<input type="text" name="fahrenheit"
onChange="fahrenheit.value";>
<input type="button" value="Convert to Celcius"
onClick="alert('Converted to celcius' + convert_celcius[])";><br />
<h3>Enter the temperature in Fahrenheit</h3>
<input type="text" name="celcius"
onChange="celcius.value";>
<input type="button" value="Convert to Fahrenheit"
onClick="alert('Converted to Fahrenheit ' + convert_fahrenheit[]";>
</pre></body>
</html>

McKirahan · Oct 19, 2004

Brian said:
Help..

We cannot get this script to work..can someone take a look at it and make
suggestions?

[snip]

<html>
<head>
<title>Convert Temperature</title>
<script type="text/javascript">
function convert_celcius() {
var what = document.getElementById("fahrenheit").value;
var temp = (what - 32) * 5 / 9;
document.getElementById("celcius").value = temp;
return what + " C = " + temp + " F";
}
function convert_fahrenheit() {
var what = document.getElementById("celcius").value;
var temp = (what * 1.8) + 32;
document.getElementById("fahrenheit").value = temp;
return what + " F = " + temp + " C";
}
</script>
</head>
<body>
<pre>
<h1>Convert Temperature</h1>
<h3>Enter the temperature in Celcius</h3>
<input type="text" name="celcius">
<input type="button" value="Convert to Fahrenheit"
onClick="alert(convert_fahrenheit())">
<br />
<h3>Enter the temperature in Fahrenheit</h3>
<input type="text" name="fahrenheit">
<input type="button" value="Convert to Celcius"
onClick="alert(convert_celcius())">
</pre>
</body>
</html>

Michael Winter · Oct 19, 2004

Help..

We cannot get this script to work..

In future, please explain what you mean. We can't read minds: you need to
state what *should* occur, what *does* occur, and possibly why that's a
problem.

As things stand, the reasons are clear, here.

can someone take a look at it and make suggestions?
Certainly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You should include the URL.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Omitting it can fail to switch some browsers into "strict rendering" mode.

[snip]

<script language="javascript">

The language attribute has been deprecated for several years now. Instead,
use the (required) type attribute.

<!-- hide from incompatible browsers

Such browsers aren't in use anymore. If I remember correctly, even
Netscape 2 understood what a SCRIPT element is, and Netscape 4 (and its
generation) are considered the oldest browsers to be considered (and even
that's debatable).

function convert_celcius(){
(document.fahrenheit.value - 32)*5/9;

It's unreasonable to assume that this will obtain a reference to the
control, fahrenheit. You also fail to do anything with the result.

Read the FAQ (<URL:http://jibbering.com/faq/>) and its notes
(<URL:http://www.jibbering.com/faq/faq_notes/faq_notes.html>). It contains
information on how to reference elements. You'll either need to include a
FORM, or reference the element with its id.

}
function convert_fahrenheit(){
(document.celcius.value * 1.8)+32;

The same applies here.

}
//stop hiding from incompatable browsers -->

This should be deleted along with the other SGML comment delimiter.

</script>
</head>
<body><pre>

Why a PRE element? I don't see any preformatted text.

<h1>Convert Temperature</h1>
<h3>Enter the temperature in Celcius</h3>

You shouldn't skip heading levels. If you want to change the style of a
heading, use CSS.

<input type="text" name="fahrenheit"
onChange="fahrenheit.value";>

That doesn't do anything. It also suffers from the "bad referencing",
earlier.

For future reference, code inside an intrinsic event can use the this
operator to refer to the current element.

<input type="button" value="Convert to Celcius"
onClick="alert('Converted to celcius' + convert_celcius[])";>

Functions are called using parentheses, not square brackets.

<br />

You're not writing XHTML, so the slash above is invalid.

From this point on, the mistakes above are repeated.

[snip]

Here's a reworked version of your page:

<URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/brian/basic.html>

It also includes input validation (will accept integers, reals, and
scientific notation) and number formatting (currently set to display 2
decimal places - the toFixed function handles that).

You'll probably want to ignore the isReal and toFixed functions at the
moment. They aren't really readable. If you want to see the effects of
toFixed, the arguments are:

n - The number to format.
p - The number of decimal places to display. Rounding is performed
automatically. The number here must be no less than 0, and no
more than 20 (the default is zero - return an integer).
g - The grouping symbol to use every three digits (the default is
no symbol).

For example,

toFixed(1234.56, 1, ',')

will produce the string, "1,234.6".

Hope that helps,
Mike

Michael Winter · Oct 19, 2004

[snip]

var what = document.getElementById("fahrenheit").value;
[snip]

<input type="text" name="fahrenheit">

Mind explaining that, please?

[snip]

Mike

McKirahan · Oct 20, 2004

Michael Winter said:
[snip]

var what = document.getElementById("fahrenheit").value;
[snip]

<input type="text" name="fahrenheit">

Click to expand...

Mind explaining that, please?

[snip]

Mike

What is your question?

I suppose you are suggesting that I use "id=";
I tested this under IE which supports "name=".

Or did you want a reference to a form field?

Would you prefer the following?

<html>
<head>
<title>Convert Temperature</title>
<script type="text/javascript">
function convert_celcius() {
var what = document.getElementById("fahrenheit").value;
var temp = (what - 32) * 5 / 9;
document.getElementById("celcius").value = temp;
return what + " F = " + temp + " C";
}
function convert_fahrenheit() {
var what = document.getElementById("celcius").value;
var temp = (what * 1.8) + 32;
document.getElementById("fahrenheit").value = temp;
return what + " C = " + temp + " F";
}
</script>
</head>
<body>
<pre>
<h1>Convert Temperature</h1>
<h3>Enter the temperature in Celcius</h3>
<input type="text" id="celcius">
<input type="button" value="Convert to Fahrenheit"
onClick="alert(convert_fahrenheit())">
<br />
<h3>Enter the temperature in Fahrenheit</h3>
<input type="text" id="fahrenheit">
<input type="button" value="Convert to Celcius"
onClick="alert(convert_celcius())">
</pre>
</body>
</html>

Note that the "return" statements were switched from before.

Michael Winter · Oct 20, 2004

[snip]

I suppose you are suggesting that I use "id=";

You have to!

I tested this under IE which supports "name=".
Incorrectly.

Or did you want a reference to a form field?

That would do just as well. Probably better, in fact.

Would you prefer the following?

Yes.

[snip]

Mike

Randy Webb · Oct 20, 2004

McKirahan wrote:

What is your question?

I suppose you are suggesting that I use "id=";

Personally, I would use name= and the forms collection.

I tested this under IE which supports "name=".

IE supports a lot of things that isn't cross-browser. Thats why it sucks
as a test browser.

Or did you want a reference to a form field?

Thats more cross-browser and more backwards compatible.

Would you prefer the following?

No, see the notes.

<html>
<head>
<title>Convert Temperature</title>
<script type="text/javascript">
function convert_celcius() {
var what = document.getElementById("fahrenheit").value;

var what = document.forms['formName'].elements['farenheit'].value;

var temp = (what - 32) * 5 / 9;
document.getElementById("celcius").value = temp;

var what = document.forms['formName'].elements['celsius'].value = temp;

return what + " F = " + temp + " C";
}
function convert_fahrenheit() {
var what = document.getElementById("celcius").value;

var what = document.forms['formName'].elements['celcius'].value;

var temp = (what * 1.8) + 32;
document.getElementById("fahrenheit").value = temp;

var what = document.forms['formName'].elements['farenheit'].value = temp;

return what + " C = " + temp + " F";
}
</script>
</head>
<body>
<pre>
<h1>Convert Temperature</h1>
<h3>Enter the temperature in Celcius</h3>

<input type="text" id="celcius">

<input type="button" value="Convert to Fahrenheit"
onClick="alert(convert_fahrenheit())">
<br />
<h3>Enter the temperature in Fahrenheit</h3>
<input type="text" id="fahrenheit">

<input type="button" value="Convert to Celcius"
onClick="alert(convert_celcius())">

<form>

Drop the pre's

Help me sort out this script	1	Oct 17, 2023
Help needed with thank you message	5	Sep 11, 2021
Temp Conversion Program...Help please	3	Sep 21, 2005
Issue with textbox script?	0	Sep 5, 2022
I need help making a zooming function	11	Dec 14, 2021
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help with code! PLEASE!	1	Mar 19, 2007
Song requests	4	Aug 16, 2023

Script Help

Brian

McKirahan

Michael Winter

Michael Winter

McKirahan

Michael Winter

Randy Webb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads