Script Help

Discussion in 'Javascript' started by Brian, Oct 19, 2004.

  1. Brian

    Brian Guest

    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">
    <!-- hide from incompatible browsers
    function convert_celcius(){
    (document.fahrenheit.value - 32)*5/9;
    }
    function convert_fahrenheit(){
    (document.celcius.value * 1.8)+32;
    }
    //stop hiding from incompatable browsers -->
    </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>
    Brian, Oct 19, 2004
    #1
    1. Advertising

  2. Brian

    McKirahan Guest

    "Brian" <> wrote in message news:...
    > 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>
    McKirahan, Oct 19, 2004
    #2
    1. Advertising

  3. On Tue, 19 Oct 2004 14:30:12 -0500, Brian <> wrote:

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

    <script type="text/javascript">

    > <!-- 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
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Oct 19, 2004
    #3
  4. On Tue, 19 Oct 2004 19:59:00 GMT, McKirahan <> wrote:

    [snip]

    > var what = document.getElementById("fahrenheit").value;


    [snip]

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


    Mind explaining that, please?

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Oct 19, 2004
    #4
  5. Brian

    McKirahan Guest

    "Michael Winter" <> wrote in message
    news:eek:psf4zjcttx13kvk@atlantis...
    > On Tue, 19 Oct 2004 19:59:00 GMT, McKirahan <> wrote:
    >
    > [snip]
    >
    > > var what = document.getElementById("fahrenheit").value;

    >
    > [snip]
    >
    > > <input type="text" name="fahrenheit">

    >
    > Mind explaining that, please?
    >
    > [snip]
    >
    > Mike
    >
    > --
    > Michael Winter
    > Replace ".invalid" with ".uk" to reply by e-mail.


    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.
    McKirahan, Oct 20, 2004
    #5
  6. On Wed, 20 Oct 2004 09:53:30 GMT, McKirahan <> wrote:

    [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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Oct 20, 2004
    #6
  7. Brian

    Randy Webb Guest

    McKirahan wrote:

    <--snip-->

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


    <form name="formName" action="">

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


    <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" id="fahrenheit">


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

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


    <form>

    Drop the pre's

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Randy Webb, Oct 20, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dpackwood
    Replies:
    3
    Views:
    1,767
  2. Rajat
    Replies:
    3
    Views:
    679
    Jorgen Grahn
    Jan 8, 2010
  3. VYAS ASHISH M-NTB837
    Replies:
    2
    Views:
    543
    Jan Kaliszewski
    Jan 7, 2010
  4. Greg
    Replies:
    1
    Views:
    163
    Gunnar Hjalmarsson
    Jun 6, 2005
  5. Replies:
    9
    Views:
    159
Loading...

Share This Page