CodingForums.com - View Single Post - How can I allow this script to accept decimal place?

AlanP · 02-13-2013, 04:08 PM

This script was my first attempt at making a calculator for a specific purpose.

It is supposed to allow a person to enter number of employees, hourly pay rate, profit margin and number of hours worked per week.

It will not accept a decimal point, so if anyone here can correct the code for me, I'd really appreciate it. It's okay if it has to have a button to calculate the total, as long as the hourly rate field and the profit percentage field and be altered. Also, if possible, could the markup percentage field be entered as a number like 3o for 30%, or is my solution of 0.3 the only way to go?

Code:

 <script type="text/javascript" language="Javascript">

var v1 = 10;
var v2 = 10;
var v3 = 0.3;
var v4 = 40;
var answer = 1200;

function calculate () {
// The Calculation: change operator in this equation to change the calculation
answer = v1 * v2 * v3 * v4;

var elem;
elem = document.getElementById("v1");
elem.value = v1;
elem = document.getElementById("v2");
elem.value = v2;
elem = document.getElementById("v3");
elem.value = v3;
elem = document.getElementById("v4");
elem.value = v4;

elem = document.getElementById("answer");
elem.value = answer;
}

function setValue(elem) {
var val = 0.0;
if (elem.value != "") {
val = parseFloat(elem.value);
}
else {
val = 0.0;
}
switch (elem.id) {
case "v1": v1 = val; break;
case "v2": v2 = val; break;
case "v3": v3 = val; break;
case "v4": v4 = val; break;
}
calculate();
}
</script>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Mon, 11 Feb 2013 17:31:53 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Calculator</title>
    
    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body onload="calculate();">
  <div>Number of Employees</div> <form><input type="text" id="v1" onkeyup="javascript: setValue(this);" /> <span style="color: #ffffff;">*</span><br />Hourly Rate<br /><input type="text" id="v2" onkeyup="javascript: setValue(this);" /> <span style="color: #ffffff;">*</span><br />Markup Percentage<br /><input type="text" id="v3" onkeyup="javascript: setValue(this);" /> <span style="color: #ffffff;">*</span><br />Hours Per Week<br /><input type="text" id="v4" onkeyup="javascript: setValue(this);" /> <span style="color: #ffffff;">=</span><br />Your Weekly Profit<br /><input type="text" id="answer" readonly="" /></form>