I am currently developing a basic price calculator that calculates the total area based on user input fields. While most of the program is functioning correctly, I am encountering an issue with the if statement that is supposed to determine the price rate based on the total sqin value. At the moment, it only applies to the Economy selection in the first drop-down menu. The other selections have fixed values and are working as expected. Any guidance on this matter would be highly appreciated, as I am still relatively new to JavaScript.
/*eslint-env browser*/
var mytotalsq;
function getEconPrice() {
var EconPrice = 0;
if (mytotalsq <= 199) {
return EconPrice.value = .40;
}
if (mytotalsq >= 200 && mytotalsq <= 299) {
return EconPrice.value = .22;
}
return EconPrice;
}
var vinyl_prices = new Array();
vinyl_prices["None"] = 0;
vinyl_prices["Econ"] = getEconPrice();
vinyl_prices["Inter"] = .25;
vinyl_prices["HPerf"] = .35;
vinyl_prices["HiTack"] = .75;
vinyl_prices["Ref"] = .75;
var laminate_prices = new Array();
laminate_prices["None"] = 1;
laminate_prices["NoLam"] = 1;
laminate_prices["StanLam"] = 1.43;
laminate_prices["HPLam"] = 1.7;
function getStickerPrice() {
var StickerPrice = 0;
var theForm = document.forms["stickerform"];
var selectedVinyl = theForm.elements["vinyl"];
StickerPrice = vinyl_prices[selectedVinyl.value];
return StickerPrice;
}
function getLaminatePrice() {
var LaminatePrice = 0;
var theForm = document.forms["stickerform"];
var selectedLaminate = theForm.elements["laminate"];
LaminatePrice = laminate_prices[selectedLaminate.value];
return LaminatePrice;
}
function calculateTotal() {
var myheight = document.getElementById('height').value;
var mywidth = document.getElementById('width').value;
var myquan = document.getElementById('quan').value;
var totalsq = document.getElementById('totalsq');
mytotalsq = mywidth * myheight * myquan;
totalsq.value = mytotalsq;
var stickerPrice = mytotalsq * getStickerPrice() * getLaminatePrice();
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Total $" + stickerPrice;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RMSticker Pricing</title>
<script type="text/javascript" src="js/stickercalc.js"></script>
<link href="css/sticker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<form action="" id="stickerform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>RMSticker</legend>
<label>Height</label>
<input id="height" type="text" />
<label>Width</label>
<input id="width" type="text" />
<label>Quantity</label>
<input id="quan" type="text" oninput="calculateTotal()" />
<input id="totalsq" name="totalsq" type="text" />
<br/><br/>
<label>Vinyl</label>
<select id="vinyl" name='vinyl' onchange="calculateTotal()">
<option value="None">Select Vinyl</option>
<option value="Econ">Economy</option>
<option value="Inter">Intermediate</option>
<option value="HPerf">High Performance</option>
<option value="HiTack">High Tack</option>
<option value="Ref">Reflective</option>
</select>
<br/><br/>
<label>Laminate</label>
<select id="laminate" name='laminate' onchange="calculateTotal()">
<option value="None">Select Laminate</option>
<option value="NoLam">None</option>
<option value="StanLam">Standard</option>
<option value="HPLam">High Performance</option>
</select>
<br/><br/>
<label>Select Finish</label>
<label class='radiolabel'><input type="radio" name="selectedfinish" value="Matte" onclick="calculateTotal()" />Matte</label><br/>
<label class='radiolabel'><input type="radio" name="selectedfinish" value="Satin" onclick="calculateTotal()" />Satin(Only available on laminated stickers)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedfinish" value="Gloss" onclick="calculateTotal()" />Gloss</label><br/>
<div id="totalPrice"></div>
</fieldset>
</div>
</div>
</form>
</div>
<!--End of wrap-->