...
PDA

Stuck, Calculator will not work

beney
06-24-2012, 04:29 AM
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>
venegal
06-24-2012, 05:32 AM
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".
Philip M
06-24-2012, 09:26 AM
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.
beney
06-24-2012, 09:09 PM
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.
Philip M
06-24-2012, 09:49 PM
Here you are - but please remember to edit your first post with code tags.

<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.
beney
06-24-2012, 09:58 PM
THANKS!!! You just saved me!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum