I am having an issue with my calculation in JS

Page 1 of 1

3 Replies - 257 Views - Last Post: 14 February 2013 - 02:55 AM

#1 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 13-February 13

I am having an issue with my calculation in JS

Posted 13 February 2013 - 09:15 AM

I cannot get it to do the addition problem. I have a working form that i adapted from another form i was using. but this one has just 4 more variables and i cannot figure out the issue. Any help would be great

Thanks, 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.thrColFixHdr #mainContent { 
	margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.thrColFixHdr #container { 
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
</style>
<script type="text/javascript">
function  doMath() {
var one = mainForm.getElementById('kas').value;
var two = mainForm.getElementById('pan').value;
var three = mainForm.getElementById('mca').value;
var four = mainForm.getElementById('asq').value;
var five = mainForm.getElementById('sysa').value;
var six = mainForm.getElementById('trnd').value;
var outp = "";
	{
    ans = (one+two+three+four+five+six);
    outp =" ";
}
  mainForm.getElementById('outtab').innerHTML = outp;
} 
</script>
</head>

<body class="thrColFixHdr">
<form name="mainForm" action="" method="post">
<table id="mainContent" align="center" border="1" cellpadding="5" cellspacing="5">
<tr><th colspan="2">Computer Diagnostic Results</th></tr>
<tr><th colspan="2">Customer Info</th></tr>
<tr><td>Title</td><td><div align="center">
  <select tabindex="19" name="title">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs</option>
    <option value="Miss">Miss</option>
  </select>
</div></td></tr>
<tr><td>Name( First, Last)</td><td><div align="center">
  <input type="text" name="name" />
</div></td></tr>
<tr><td>Email Address</td><td><div align="center">
  <input type="text" name="emailaddy" />
</div></td></tr>
<tr><th colspan="2">Computer Specifications</th></tr>
<tr>
	<td><div align="left">Processor:</div></td><td><div align="center">
  <input tabindex="1" type="text" name="processor" />
</div></td></tr>
<tr><td><div align="left">Motherboard:</div></td><td><div align="center">
  <input tabindex="2" type="text" name="motherboard" />
</div></td></tr>
<tr><td><div align="left">Memory:</div></td><td><div align="center">
  <input tabindex="3" type="text" name="memory" />
</div></td></tr>
<tr><td><div align="left">Hard Drive:</div></td><td><div align="center">
  <input tabindex="4" type="text" name="hdd" />
</div></td></tr>
<tr><th colspan="2">Computer Specifications</th></tr>
<tr><td><div align="left">Processor:</div></td><td><div align="center">
  <select tabindex="5" name="processorstatus">
    <option value="Pass" selected="selected">Pass</option>
    <option value="Fail">Fail</option>
    <option value="Not Ran">Not Ran</option>
    >
  </select>
</div></td></tr>
<tr><td><div align="left">Motherboard:</div></td><td><div align="center">
  <select tabindex="6" name="motherboardstatus">
    <option value="Pass" selected="selected">Pass</option>
    <option value="Fail">Fail</option>
    <option value="Not Ran">Not Ran</option>
  </select>
</div></td></tr>
<tr><td><div align="left">Memory:</div></td><td><div align="center">
  <select tabindex="7" name="memorystatus">
    <option selected="selected">Pass</option>
    <option>Fail</option>
    <option>Not Ran</option>
  </select>
</div></td></tr>
<tr><td><div align="left">Hard Drive:</div></td><td><div align="center">
  <select tabindex="8" name="harddrivestatus">
    <option value="Pass" selected="selected">Pass</option>
    <option value="Fail">Fail</option>
    <option value="Not Ran">Not Ran</option>
  </select>
</div></td></tr>
<tr><th colspan="2">Virus Removal Results</th></tr>
<tr><td><div align="left">Program used</div></td><td><div align="center">Number of viruses removed</div></td></tr>
<tr><td><div align="left">Kaspersky</div></td><td><div align="center">
  <input tabindex="9" type="text" id="kas" />
</div></td></tr>
<tr><td><div align="left">Panda</div></td><td><div align="center">
  <input tabindex="10" type="text" id="pan" />
</div></td></tr>
<tr><td><div align="left">McAfee</div></td><td><div align="center">
  <input tabindex="11" type="text" id="mca" />
</div></td></tr>
<tr><td><div align="left">A-Squared</div></td><td><div align="center">
  <input tabindex="12" type="text" id="asq" />
</div></td></tr>
<tr><td><div align="left">System Analyzer</div></td><td><div align="center">
  <input tabindex="13" type="text" id="sysa"  />
</div></td></tr>
<tr><td><div align="left">Trend Micro Command Line</div></td><td><div align="center">
  <input tabindex="14" type="text" id="trnd"  />
</div></td></tr>
<tr>
  <td align="right">Totals</td><td><div align="center">
    <span id="outtab"></span>
  </div></td><td><input type="button" onclick="doMath()" value="Calc" /></td></tr>
  <tr><th colspan="2">Optimization Results</th></tr>
<tr>
	<td> <div align="center"># of Files Removed</div></td><td><div align="center">
  Spaced Saved
</div></td></tr>
<tr>
	<td> <div align="center"><input tabindex="16" type="text" name="numberoffiles" /></div></td><td><div align="center">
  <input tabindex="17" type="text" name="spacesaved" />
  </div></td></tr>
<tr><th colspan="2">Recommendations:</th></tr>
<tr><td colspan="2" align="center"><textarea tabindex="18" cols="60" rows="10"></textarea></td></tr>
<tr>
  <td align="left"><input type="reset" value="Reset" /></td><td align="right"><input type="submit" value="Submit to Customer" /></td></tr>
</table>
</form>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: I am having an issue with my calculation in JS

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 919
  • View blog
  • Posts: 6,443
  • Joined: 07-September 06

Re: I am having an issue with my calculation in JS

Posted 13 February 2013 - 09:27 AM

I see a few problems. First, on line 36 you are creating an additional scope that isn't needed (ending on line 39).
On line 38 you are setting outp to be " " which isn't what you likely want.
On line 37 you set ans (which isn't previously defined - making it global) to all the "numbers" added together, however they aren't numbers from Javascript's perspective since they are coming from strings. To get them to be numbers you need to use parseInt() or parseFloat() (depending on what you want as a datatype).

Here's a quick example of what I mean:
<!DOCTYPE html>
<html>
<body>

<input type="text" value="12" id="t"/>

<script>
var num = document.getElementById("t").value;
document.write(num + 1);
</script>

</body>
</html>


Notice that the output is 121, while it should be 13.

Now this example fixes that problem:
<!DOCTYPE html>
<html>
<body>

<input type="text" value="12" id="t"/>

<script>
var num = parseInt(document.getElementById("t").value);
document.write(num + 1);
</script>

</body>
</html>


Hope that helps.
Was This Post Helpful? 1
  • +
  • -

#3 patk570  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 13-February 13

Re: I am having an issue with my calculation in JS

Posted 13 February 2013 - 01:11 PM

I got er fixed. when using the 
outp
variable i forgot to put 
outp = ans;



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.thrColFixHdr #mainContent { 
	margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.thrColFixHdr #container { 
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
</style>
<script type="text/javascript">
function  doMath() {
var num1 = parseInt(document.getElementById('kas').value);
var num2 = parseInt(document.getElementById('pan').value);
var num3 = parseInt(document.getElementById('mca').value);
var num4 = parseInt(document.getElementById('asq').value);
var num5 = parseInt(document.getElementById('sysa').value);
var num6 = parseInt(document.getElementById('trnd').value);
var outp = 0 +" Viruses Removed";

	{
    ans = (num1+num2+num3+num4+num5+num6);
    outp = ans;
}
  document.getElementById('outtab').innerHTML = outp;
} 
</script>
</head>

<body class="thrColFixHdr">
<form name="mainForm" action="" method="post">
<table id="mainContent" align="center" border="1" cellpadding="5" cellspacing="5">
<tr><th colspan="2">Computer Diagnostic Results</th></tr>
<tr><th colspan="2">Customer Info</th></tr>
<tr><td>Title</td><td><div align="center">
  <select tabindex="19" name="title">
    <option value="Mr.">Mr.</option>
    <option value="Mrs.">Mrs</option>
    <option value="Miss">Miss</option>
  </select>
</div></td></tr>
<tr><td>Name( First, Last)</td><td><div align="center">
  <input type="text" name="name" />
</div></td></tr>
<tr><td>Email Address</td><td><div align="center">
  <input type="text" name="emailaddy" />
</div></td></tr>
<tr><th colspan="2">Computer Specifications</th></tr>
<tr>
	<td><div align="left">Processor:</div></td><td><div align="center">
  <input tabindex="1" type="text" name="processor" />
</div></td></tr>
<tr><td><div align="left">Motherboard:</div></td><td><div align="center">
  <input tabindex="2" type="text" name="motherboard" />
</div></td></tr>
<tr><td><div align="left">Memory:</div></td><td><div align="center">
  <input tabindex="3" type="text" name="memory" />
</div></td></tr>
<tr><td><div align="left">Hard Drive:</div></td><td><div align="center">
  <input tabindex="4" type="text" name="hdd" />
</div></td></tr>
<tr><th colspan="2">Computer Specifications</th></tr>
<tr><td><div align="left">Processor:</div></td><td><div align="center">
  <select tabindex="5" name="processorstatus">
    <option value="Pass" selected="selected">Pass</option>
    <option value="Fail">Fail</option>
    <option value="Not Ran">Not Ran</option>
    >
  </select>
</div></td></tr>
<tr><td><div align="left">Motherboard:</div></td><td><div align="center">
  <select tabindex="6" name="motherboardstatus">
    <option value="Pass" selected="selected">Pass</option>
    <option value="Fail">Fail</option>
    <option value="Not Ran">Not Ran</option>
  </select>
</div></td></tr>
<tr><td><div align="left">Memory:</div></td><td><div align="center">
  <select tabindex="7" name="memorystatus">
    <option selected="selected">Pass</option>
    <option>Fail</option>
    <option>Not Ran</option>
  </select>
</div></td></tr>
<tr><td><div align="left">Hard Drive:</div></td><td><div align="center">
  <select tabindex="8" name="harddrivestatus">
    <option value="Pass" selected="selected">Pass</option>
    <option value="Fail">Fail</option>
    <option value="Not Ran">Not Ran</option>
  </select>
</div></td></tr>
<tr><th colspan="2">Virus Removal Results</th></tr>
<tr><td><div align="left">Program used</div></td><td><div align="center">Number of viruses removed</div></td></tr>
<tr><td><div align="left">Kaspersky</div></td><td><div align="center">
  <input tabindex="9"  type="text" id="kas" />
</div></td></tr>
<tr><td><div align="left">Panda</div></td><td><div align="center">
  <input tabindex="10"  type="text" id="pan" />
</div></td></tr>
<tr><td><div align="left">McAfee</div></td><td><div align="center">
  <input tabindex="11"  type="text" id="mca" />
</div></td></tr>
<tr><td><div align="left">A-Squared</div></td><td><div align="center">
  <input tabindex="12"  type="text" id="asq" />
</div></td></tr>
<tr><td><div align="left">System Analyzer</div></td><td><div align="center">
  <input tabindex="13"  type="text" id="sysa"  />
</div></td></tr>
<tr><td><div align="left">Trend Micro Command Line</div></td><td><div align="center">
  <input tabindex="14"  type="text" id="trnd"  />
</div></td></tr>
<tr>
  <td align="right">Total</td><td><div align="center">
    <span id="outtab"></span>
  </div></td><td><input type="button" onclick="doMath()" value="Calc" /></td></tr>
  <tr><th colspan="2">Optimization Results</th></tr>
<tr>
	<td> <div align="center"># of Files Removed</div></td><td><div align="center">
  Spaced Saved
</div></td></tr>
<tr>
	<td> <div align="center"><input tabindex="16" type="text" name="numberoffiles" /></div></td><td><div align="center">
  <input tabindex="17" type="text" name="spacesaved" />
  </div></td></tr>
<tr><th colspan="2">Recommendations:</th></tr>
<tr><td colspan="2" align="center"><textarea tabindex="18" cols="60" rows="10"></textarea></td></tr>
<tr>
  <td align="left"><input type="reset" value="Reset" /></td><td align="right"><input type="submit" value="Submit to Customer" /></td></tr>
</table>
</form>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 407
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: I am having an issue with my calculation in JS

Posted 14 February 2013 - 02:55 AM

Well, I have a suggestion.

Since you have a form, you can avoid using the getElementById if you do like this.
var num1= parseInt(document.mainForm.kas.value);
var num2= parseInt(document.mainForm.pan.value);

and so on...

Also, you need to check for Not a number and negative values entered in the text boxes.For that you could do something like this.

if( isNaN(num1) || isNaN(num2) || isNaN(num3) || isNaN(num4) || isNaN(num5) || isNaN(num6) )
{
  alert("Please enter only numeric values for the text boxes");
}

if( num1>0 && num2>0 && num3>0 && num4>0 && num5>0 && num6>0)
{
   //calculate sum
}
else
{
  alert("Please enter a positive number for the viruses removed");
}


regards,
Raghav









regards,
Raghav

This post has been edited by raghav.naganathan: 14 February 2013 - 03:03 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1