Problem - part 2

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Ed Blinn

    #1

    Problem - part 2

    Can someone tell me why this script will only work on a Mac with Internet
    Explorer.

    Thanks,
    Ed

    <html>
    <head>
    <script type="text/javascript">
    //Square Root
    function squareroot()
    {
    var x=document.form s('root')
    var data=x.elements['num'].value;
    var sqr=Math.sqrt(d ata)
    frames['sqrt'].document.write (sqr)
    }
    //Squared of an item
    function squared()
    {
    var x=document.form s('square')
    var data=x.elements['num2'].value;
    var sum=data*data
    frames['squaredframe'].document.write (sum)
    }
    //Tanget
    function tangent()
    {
    var x=document.form s('tangent')
    var data=x.elements['num3'].value;
    var tan=Math.tan(da ta)
    frames['tangentframe'].document.write (tan)
    }
    //Refresh Values
    function refresh()
    {
    location.reload (sqrt)
    location.reload (squaredframe)
    location.reload (tangentframe)
    }
    </script>
    </head>

    <body>
    <table width="100%" border="1">
    <tr>
    <td width="73%" height="50">
    <form name="root">
    Type in a number to compute the square root of the value.
    <input name="num" type="text" id="num" size="10" maxlength="10">
    <input name="button" type="button" onClick="square root()"
    value="Compute" >
    </form></td>
    <td width="27%" height="50"><if rame name="sqrt" width="100%" height="50"
    frameborder="0" scrolling="no"> </iframe></td>
    </tr>
    <tr>
    <td height="50">
    <form name="square">
    Type in a number to compute the square of the value.
    <input name="num2" type="text" id="num2" size="10" maxlength="10">
    <input name="button2" type="button" onClick="square d()"
    value="Compute" >
    </form></td>
    <td><iframe name="squaredfr ame" width="100%" height="50" frameborder="0"
    scrolling="no"> </iframe></td>
    </tr>
    <tr>
    <td height="50">
    <form name="tangent">
    Type in a number to compute the tanget of the value.
    <input name="num3" type="text" id="num3" size="10" maxlength="10">
    <input name="button3" type="button" onClick="tangen t()"
    value="Compute" >
    </form></td>
    <td><iframe name="tangentfr ame" width="100%" height="50" frameborder="0"
    scrolling="no"> </iframe></td>
    </tr>
    </table>
    <div align="right">
    <form name="refresh">
    Hit refresh to compute new values.
    <input type="button" onClick="refres h()" value="Refresh Values">
    </form>
    </div>
    </body>
    </html>

  • DU

    #2
    Re: Problem - part 2

    Ed Blinn wrote:[color=blue]
    > Can someone tell me why this script will only work on a Mac with Internet
    > Explorer.
    >
    > Thanks,
    > Ed
    >
    > <html>[/color]

    No doctype declaration.
    Aalto University, Finland is a new multidisciplinary science and art community in the fields of science, business, and art and design.

    http://www.w3.org/QA/2002/04/valid-dtd-list.html
    [color=blue]
    > <head>
    > <script type="text/javascript">
    > //Square Root
    > function squareroot()
    > {
    > var x=document.form s('root')[/color]

    1- When editing any kind of code in any language, try to use meaningful,
    intuitive, significant identifier names for variables. This is a good
    coding practice which saves time to others reviewing your code, help
    debugging with debuggers, etc..
    2- forms["root"] is correct. forms[0] is even better since it will work
    flawlessly in HTML strict DTD and XHTML strict DTD. forms('root') won't
    work.

    Together:

    var objForm = document.forms["root"];
    [color=blue]
    > var data=x.elements['num'].value;[/color]

    W3C DOM methods prefer
    elements.namedI tem("num").valu e





    [color=blue]
    > var sqr=Math.sqrt(d ata)[/color]

    If data is a string, then calling Math.sqrt will not work... and num is
    type="text"

    [color=blue]
    > frames['sqrt'].document.write (sqr)[/color]

    You must first open the iframed document, then write sqr, then close the
    iframed document.

    So:

    frames["sqrt"].document.open( );
    "open:
    Open a document stream for writing. If a document exists in the
    target, this method clears it."

    frames["sqrt"].document.write (sqr);
    frames["sqrt"].document.close ();

    "close:
    Closes a document stream opened by open() and forces rendering."


    IMO, there is nothing, absolutely nothing which justifies the use of
    iframes for the apparent purposes of your code.
    [color=blue]
    > }
    > //Squared of an item
    > function squared()
    > {
    > var x=document.form s('square')[/color]

    var objFormSquare = document.forms["square"];
    [color=blue]
    > var data=x.elements['num2'].value;[/color]

    var data = parseFloat(objF ormSquare.eleme nts.namedItem(" num2").value);
    [color=blue]
    > var sum=data*data
    > frames['squaredframe'].document.write (sum)[/color]

    open and close here too.
    [color=blue]
    > }
    > //Tanget
    > function tangent()
    > {
    > var x=document.form s('tangent')[/color]

    forms["FormName"] or forms[index]
    [color=blue]
    > var data=x.elements['num3'].value;
    > var tan=Math.tan(da ta)[/color]

    Again here too: parseFloat before calculating the tan.
    The parameter must be a number.

    [color=blue]
    > frames['tangentframe'].document.write (tan)
    > }
    > //Refresh Values
    > function refresh()
    > {
    > location.reload (sqrt)[/color]

    frames["sqrt"].location.reloa d(true);
    would be the correct way to force a reload but since you would open()
    and then close() the iframe, then reloading the iframed document is no
    longer necessary.
    [color=blue]
    > location.reload (squaredframe)
    > location.reload (tangentframe)
    > }
    > </script>
    > </head>
    >
    > <body>
    > <table width="100%" border="1">[/color]

    table design: avoid this whenever you can. Tables should be used only
    for tabular data.
    [color=blue]
    > <tr>
    > <td width="73%" height="50">
    > <form name="root">[/color]

    A table can be inside a form; the opposite creates invalid documents.
    Here, the action attribute is missing. A validator would have reported
    this as an error.
    [color=blue]
    > Type in a number to compute the square root of the value.
    > <input name="num" type="text" id="num" size="10" maxlength="10">[/color]

    For several reasons which I won,t explicit here, I recommend to always
    give distinct identifier values to name attribute and id attribute. If
    you don't need to declare an id attribute, then don't.
    [color=blue]
    > <input name="button" type="button" onClick="square root()"
    > value="Compute" >
    > </form></td>
    > <td width="27%" height="50"><if rame name="sqrt" width="100%" height="50"
    > frameborder="0" scrolling="no"> </iframe></td>
    > </tr>
    > <tr>
    > <td height="50">
    > <form name="square">[/color]

    same thing here: you can not have a form inside a table. Action missing.
    [color=blue]
    > Type in a number to compute the square of the value.
    > <input name="num2" type="text" id="num2" size="10" maxlength="10">
    > <input name="button2" type="button" onClick="square d()"
    > value="Compute" >
    > </form></td>
    > <td><iframe name="squaredfr ame" width="100%" height="50" frameborder="0"
    > scrolling="no"> </iframe></td>
    > </tr>
    > <tr>
    > <td height="50">
    > <form name="tangent">[/color]

    action missing; form can not be within a table.
    [color=blue]
    > Type in a number to compute the tanget of the value.
    > <input name="num3" type="text" id="num3" size="10" maxlength="10">
    > <input name="button3" type="button" onClick="tangen t()"
    > value="Compute" >
    > </form></td>
    > <td><iframe name="tangentfr ame" width="100%" height="50" frameborder="0"
    > scrolling="no"> </iframe></td>
    > </tr>
    > </table>
    > <div align="right">
    > <form name="refresh">
    > Hit refresh to compute new values.
    > <input type="button" onClick="refres h()" value="Refresh Values">
    > </form>
    > </div>
    > </body>
    > </html>
    >[/color]

    3 forms, 3 iframes, reload/refresh functions can be reduced to, replaced
    by a single form.

    Tested, valid and working in MSIE 6 for Windows, Opera 7.20, Mozilla
    1.5b and NS 7.1:



    DU
    --
    Javascript and Browser bugs:

    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x


    Comment

    Working...