Reputation: 23
I am creating a cost calculator using JavaScript. I have two button in my code; clear and calculate and both work fine for the first time. However when I select different drop down menu and try to calculate again, it doesn't recalculate but same number or blank fields stay in the table.
How do I make it to recalculate? and is it possible to do this without clear button?
var settingValue;
function clearForm(){
document.getElementById("myForm").reset();
}
function settingValue() {
var payment;
var copayPerc = document.getElementById("copayPerc").value;
settingValue = document.getElementById("Setting").value;
payment=medicarePaymentCal(settingValue);
document.getElementById("medipayment").value = payment;
document.getElementById("adj").value=seqAdjCal(payment);
document.getElementById("net").value=payment+seqAdjCal(payment);
document.getElementById("copay").value=payment*0.2;
document.getElementById("actualCopay").value=payment*0.2*copayPerc;
totalProductCost();
}
function medicarePaymentCal(value1) {
var result;
if (value1 == "Office") {
return 1411.21;
} else if (value1="HOPD") {
return 500;
}
}
function seqAdjCal(val){
return -(0.02*(0.8*val));
}
function totalProductCost(){
var applications=document.getElementById("applications").value;
var productCost=document.getElementById("productCost").value;
var total=applications*productCost;
document.getElementById("totalProductCost").value = total;
}
<html>
<head>
</head>
<body>
<form method="post" id="myForm">
<table border=1>
<tr>
<td>Setting : </td>
<td><select id="Setting">
<option value="Office">Office</option>
<option value="HOPD">HOPD</option>
</select></td>
</tr>
<tr>
<td>Facility : </td>
<td><select id="Facility">
<option value="100015">Mount Sinai, 123 Main Street, New York</option>
<option value="100016">NYU Medical, 25 North Broadway, New York</option>
</select></td>
<tr>
<td>Product Size : </td>
<td>
<100sq cm</td>
</tr>
<tr>
<td>Number of DFU patients :</td>
<td>10</td>
</tr>
<tr>
<td>Patient co-pay % (based on wage adj.rate) : </td>
<td>0.2</td>
</tr>
<tr>
<td>Co-Pay percent actuallly collected : </td>
<td><input id="copayPerc" type="number" value="0.75"></td>
</tr>
<tr>
<td><input type="button" id="clear" value="Clear" onclick="clearForm();">
</td>
<td>
<input type="button" id="button" value="calculate" onclick="settingValue();">
</td>
</tr>
</table>
<table border=1>
<tr>
<td>Medicare Payment :</td>
<td>
<input type="number" id="medipayment">
</td>
</tr>
<tr>
<td>Sequestration Adjustment (-2%) : </td>
<td> <input type="number" id="adj"> </td>
</tr>
<tr>
<td>Medicare Payment Net of Seq. : </td>
<td> <input type="number" id="net"> </td>
</tr>
<tr>
<td>Projected Patient Co-Pay : </td>
<td> <input type="number" id="copay"> </td>
</tr>
<tr>
<td>Actual Co-Pay Amount Collected : </td>
<td> <input type="number" id="actualCopay"> </td>
</tr>
<tr>
<td>No. of applications per Episode : </td>
<td> <input type="number" id="applications" value="1"> </td>
</tr>
<tr>
<td>Product cost per treatment : </td>
<td> <input type="number" id="productCost" value="1125"> </td>
</tr>
<tr>
<td>Total product cost per episode : </td>
<td> <input type="number" id="totalProductCost"> </td>
</tr>
</table>
</form>
</body>
</html>
Upvotes: 0
Views: 2912
Reputation: 220
Your var settingValue
has same name as function settingValue
.
Just rename one and should work:
var settingValue;
function clearForm() {
document.getElementById("myForm").reset();
}
function funcSettingValue() {
var payment;
var copayPerc = document.getElementById("copayPerc").value;
settingValue = document.getElementById("Setting").value;
payment = medicarePaymentCal(settingValue);
document.getElementById("medipayment").value = payment;
document.getElementById("adj").value = seqAdjCal(payment);
document.getElementById("net").value = payment + seqAdjCal(payment);
document.getElementById("copay").value = payment * 0.2;
document.getElementById("actualCopay").value = payment * 0.2 * copayPerc;
totalProductCost();
}
function medicarePaymentCal(value1) {
var result;
if (value1 == "Office") {
return 1411.21;
} else if (value1 = "HOPD") {
return 500;
}
}
function seqAdjCal(val) {
return -(0.02 * (0.8 * val));
}
function totalProductCost() {
var applications = document.getElementById("applications").value;
var productCost = document.getElementById("productCost").value;
var total = applications * productCost;
document.getElementById("totalProductCost").value = total;
}
<html>
<form method="post" id="myForm">
<table border=1>
<tr>
<td>Setting :</td>
<td>
<select id="Setting">
<option value="Office">Office</option>
<option value="HOPD">HOPD</option>
</select>
</td>
</tr>
<tr>
<td>Facility :</td>
<td>
<select id="Facility">
<option value="100015">Mount Sinai, 123 Main Street, New York</option>
<option value="100016">NYU Medical, 25 North Broadway, New York</option>
</select>
</td>
<tr>
<td>Product Size :</td>
<td>
<100sq cm</td>
</tr>
<tr>
<td>Number of DFU patients :</td>
<td>10</td>
</tr>
<tr>
<td>Patient co-pay % (based on wage adj.rate) :</td>
<td>0.2</td>
</tr>
<tr>
<td>Co-Pay percent actuallly collected :</td>
<td>
<input id="copayPerc" type="number" value="0.75">
</td>
</tr>
<tr>
<td>
<input type="button" id="clear" value="Clear" onclick="clearForm();">
</td>
<td>
<input type="button" id="button" value="calculate" onclick="funcSettingValue();">
</td>
</tr>
</table>
<table border=1>
<tr>
<td>Medicare Payment :</td>
<td>
<input type="number" id="medipayment">
</td>
</tr>
<tr>
<td>Sequestration Adjustment (-2%) :</td>
<td>
<input type="number" id="adj">
</td>
</tr>
<tr>
<td>Medicare Payment Net of Seq. :</td>
<td>
<input type="number" id="net">
</td>
</tr>
<tr>
<td>Projected Patient Co-Pay :</td>
<td>
<input type="number" id="copay">
</td>
</tr>
<tr>
<td>Actual Co-Pay Amount Collected :</td>
<td>
<input type="number" id="actualCopay">
</td>
</tr>
<tr>
<td>No. of applications per Episode :</td>
<td>
<input type="number" id="applications" value="1">
</td>
</tr>
<tr>
<td>Product cost per treatment :</td>
<td>
<input type="number" id="productCost" value="1125">
</td>
</tr>
<tr>
<td>Total product cost per episode :</td>
<td>
<input type="number" id="totalProductCost">
</td>
</tr>
</table>
</form>
</html>
Upvotes: 2