Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stuck, Calculator will not work

    HI,

    I have been starring at this code for days and can not find the error. Can any one help?

    Any help will be greatly appreciated!!
    Brian

    <html>
    <head>
    <title>Normalize Quartenion</title>
    <script type="text/javascript"><!--
    function calculate(input)
    {

    var qw = parseFloat(input.w.value);
    var qy = parseFloat(input.x.value);
    var qy = parseFloat(input.y.value);
    var qz = parseFloat(input.z.value);
    var q0 = qw*qw;
    var q1 = qx*qx;
    var q2 = qy*qy;
    var q3 = qz*qz;
    var h = q0 + q1 + q2 + q3;
    var qq = Math.sqrt(h);
    input.in.value = qx/qq;
    input.jn.value = qy/qq;
    input.kn.value = qz/qq;
    input.rn.value = qw/qq;

    }
    //--></script>
    </head>
    <body>
    <h2>Normalize Quaternion</h2>

    <form>
    <table border="1">
    <tr>
    <td><table border="2">
    <tr>
    <td align="center">i</td>
    <td align="center">j</td>
    <td align="center">k</td>
    <td align="center">real</td>
    </tr>
    <tr>
    <td><input name="x" type="text" value="0" /></td>
    <td><input name="y" type="text" value="0" /></td>
    <td><input name="z" type="text" value="0" /></td>
    <td><input name="w" type="text" value="1" /></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td align="center">
    <br>
    <input type="button" name="calculate" id="calculate" value="Normalize" onclick="calculate(this.form)" />

    <br><br>

    </td>
    </tr>

    <tr>
    <td>
    <h4>Normalized Function:</h4>
    <table border="3" align="center">

    <td align="center">i</td>
    <td align="center">j</td>
    <td align="center">k</td>
    <td align="center">real</td>
    <tr>
    <td><input name="in" type="text" value="0" /></td>
    <td><input name="jn" type="text" value="0" /></td>
    <td><input name="kn" type="text" value="0" /></td>
    <td><input name="rn" type="text" value="1" /></td>
    </tr>
    </td>

    </table></td>
    </tr>
    </table>

    </form>
    </body>
    </html>

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    One thing: Don't use global variables. This is not about schooling you on best practices, it's actually biting you in the behind here: calculate seems to refer to the DOM element of same name/id rather than your function even in modern browsers.

    Another thing: One of those "qy" is supposed to be "qx".
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    It is only partly about not using global varaibles - it is more about using duplicate names for HTML elements and Javascript functions/variables.

    You should also avoid giving names or id's to your variables/functions/arguments/forms words which are HTML or JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'input' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.



    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.
    Last edited by Philip M; 06-24-2012 at 10:01 AM. Reason: Noticed typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Guys,

    I think I made the all the changes that I understood, but still no joy.
    I'm still not completely certain what is meant by global variables. Everything I know was self taught by looking at code-- so terminology, and nomenclature is limited.
    I honestly have not coded anything in JavaScript in quite awhile. I got my other two pages working but this one is kicking my butt.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Here you are - but please remember to edit your first post with code tags.

    Code:
    <html>
    <head>
    <title>Normalize Quartenion</title>
    <script type="text/javascript">
    
    function calculate(inp) {
    
    var qw = parseFloat(inp.w.value);
    var qx = parseFloat(inp.x.value);
    var qy = parseFloat(inp.y.value);
    var qz = parseFloat(inp.z.value);
    var q0 = qw*qw;
    var q1 = qx*qx;
    var q2 = qy*qy;
    var q3 = qz*qz;
    var h = q0 + q1 + q2 + q3;
    var qq = Math.sqrt(h);
    
    document.forms[0].inx.value = qx/qq;
    document.forms[0].jnx.value = qy/qq;
    document.forms[0].knx.value = qz/qq;
    document.forms[0].rnx.value = qw/qq;
    
    }
    </script>
    
    </head>
    <body>
    <h2>Normalize Quaternion</h2>
    
    <form>
    <table border="1">
    <tr>
    <td><table border="2">
    <tr>
    <td align="center">i</td>
    <td align="center">j</td>
    <td align="center">k</td>
    <td align="center">real</td>
    </tr>
    <tr>
    <td><input name="x" type="text" value="0" /></td>
    <td><input name="y" type="text" value="0" /></td>
    <td><input name="z" type="text" value="0" /></td>
    <td><input name="w" type="text" value="1" /></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td align="center">
    <br>
    <input type="button" value="Normalize" onclick="calculate(this.form)" /> 
    
    <br><br>
    
    </td>
    </tr>
    
    <tr>
    <td>
    <h4>Normalized Function:</h4>
    <table border="3" align="center">
    
    <td align="center">i</td>
    <td align="center">j</td>
    <td align="center">k</td> 
    <td align="center">real</td>
    <tr>
    <td><input name="inx" type="text" value="0" /></td> 
    <td><input name="jnx" type="text" value="0" /></td>
    <td><input name="knx" type="text" value="0" /></td>
    <td><input name="rnx" type="text" value="1" /></td>
    </tr>
    </td>
    
    </table></td>
    </tr>
    </table>
    
    </form>
    </body>
    </html>
    That works, but I have no idea whether the calculated results are correct. If you want to display results to x places of decimals, use .toFixed(x).

    It would be better if the textbox cleared as soon as it received focus.

    Your troubles boil down to unsuitable names for your HTML elements and Javascript variables.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANKS!!! You just saved me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •