We Keep Coding

applying 10% discount in calculation

At the moment im trying to apply a 10% discount on "apppreis" and "backendpreis" when "jährlich" is selected .Im doing that with the if function problem is i would have to write too many if functions since there is so many options to choose from.Is there any easier way to do this instead of using if.
js:
const btncalc = document.querySelector('.calcit');
const summetext = document.querySelector('.summe');
const backend = document.querySelector('.backenduser');
const update = document.querySelectorAll('.update');
const backendstk = document.querySelector('.backendanzahl')
const appstk = document.querySelector('.appanzahl')
const preisproapp = document.querySelector('.proapp')
const preisprobackend = document.querySelector('.probackend')
const jährlich = document.querySelector('.rabatt')
update.forEach(input => {
input.addEventListener('input', function () {
calcSum();
})
});
//funktion damit der Slider sich beim eingeben vom input field bewegt
function updateAppUser(val, inputtype) {
if (inputtype == 'appslider') {
document.getElementById('AppInput').value = val;
}
if (inputtype == 'appinput') {
document.getElementById('appuserSlider').value = val;
}
calcSum();
}
function updateBackendUser(val, inputtype) {
if (inputtype == 'backendslider') {
document.getElementById('BackendInput').value = val;
}
if (inputtype == 'backendinput') {
document.getElementById('backendSlider').value = val;
}
calcSum();
}
//Rechnung für die Anzahl von Backend und App-Benutzern
function calcSum() {
var backendanzahl = document.getElementsByClassName("backenduser")[0].value;
var appanzahl = document.getElementsByClassName("appuser")[0].value;
var annual = document.getElementById("annual");
var backendtype = annual.options[annual.selectedIndex].value;
//Preisstaffelung für app und backend
apppreis = 7.5;
if(backendtype == "J" ){
if (appanzahl < 11) {
apppreis = 7.5;
} else if (appanzahl < 26) {
apppreis = 7;
} else if (appanzahl < 51) {
apppreis = 6.50;
} else if (appanzahl < 76) {
apppreis = 6;
} else if (appanzahl > 76) {
apppreis = 5.5;
}
}
var mylist = document.getElementById("myList");
var backendtype = mylist.options[mylist.selectedIndex].value;
backendpreis = 35;
if (backendtype == "ZR") {
if (backendanzahl < 5) {
backendpreis = 35;
} else if (backendanzahl < 11) {
backendpreis = 32.50;
} else if (backendanzahl < 21) {
backendpreis = 30;
}
} else {
if (backendanzahl < 6) {
backendpreis = 20;
} else if (backendanzahl < 11) {
backendpreis = 18;
} else if (backendanzahl < 21) {
backendpreis = 16;
}
var annual = document.getElementById("annual");
var backendtype = annual.options[annual.selectedIndex].value;
backendpreis = 35;
if (backendtype == "M") {
if (backendanzahl < 5) {
backendpreis = 35 * 1.1;
} else if (backendanzahl < 11) {
backendpreis = 32.50 * 1.1;
} else if (backendanzahl < 21) {
backendpreis = 30 * 1.1;
}
} else {
if (backendanzahl < 6) {
backendpreis = 20 * 1.1;
} else if (backendanzahl < 11) {
backendpreis = 18 * 1.1;
} else if (backendanzahl < 21) {
backendpreis = 16 * 1.1;
}
}
if(backendtype == "M" ){
if (appanzahl < 11) {
apppreis = (7.5 * 1.1);
} else if (appanzahl < 26) {
apppreis = (7* 1.1);
} else if (appanzahl < 51) {
apppreis = (6.50* 1.1);
} else if (appanzahl < 76) {
apppreis = (6* 1.1);
} else if (appanzahl > 76) {
apppreis = 5.5* 1.1;
}
}
}
if (isNaN(proapp2)) proapp2 = 0.00;
var mytext = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 1).toFixed(2);
summetext.textContent = mytext;
var backendpreissumme = (backendanzahl * backendpreis).toFixed(2);
backendstk.textContent = backendpreissumme;
var apppreissumme = (appanzahl * apppreis).toFixed(2);
appstk.textContent = apppreissumme;
var probackend2 = ((backendpreis * backendanzahl) / (backendanzahl)).toFixed(2);
preisprobackend.textContent = probackend2;
var proapp2 = appanzahl > 0 ? ((apppreis * appanzahl) / (appanzahl)).toFixed(2) : "0.00";
preisproapp.textContent = proapp2;
var jährlicherrabatt = ((backendanzahl * backendpreis + +appanzahl * apppreis) * 0.9).toFixed(2);
jährlich.textContent = jährlicherrabatt;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="grid-container" >
<div style="width: 250px"class="grid-item">
<header>Preiskalkulator</header>
<div class="slidecontainer">
App-Benutzer: <br>
<input id="appuserSlider" value="0" onchange="updateAppUser(this.value);" type="range" min="0" max="100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appslider');" class='appuser update'></input>
<input style="width: 30px" type="text" id="AppInput" value="0" placeholder="1-100" oninput="this.value = this.value > 100 ? 100 : Math.abs(this.value); updateAppUser(this.value, 'appinput');"><br>
Backendbenutzer: <br>
<input id="backendSlider" value="1" onchange="updateBackendUser(this.value);" type="range" min="1" max="15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value); updateBackendUser(this.value, 'backendslider'); " class='backenduser update'></input>
<input style="width: 30px" type="text" id="BackendInput" value="1" placeholder="1-15" oninput="this.value = this.value > 15 ? 15 : Math.abs(this.value,); updateBackendUser(this.value, 'backendinput');"><br>
</div>
<b> Bürosoftware wählen </b>
<select style="width: 150px" id = "myList" onchange = "calcSum()" >
<option value="Z">Zeiterfassung</option>
<option value="ZR"> Zeiterfassung + Rechnungswesen</option>
</select>
<select style="width: 150px" id = "annual" onchange = "calcSum()" >
<option value="J">Jährlich</option>
<option value="M">monatlich</option>
</select>
</div>
<div class="grid-item" style="width: 250px">
<table style="width:100%;text-align: right;">
<tr>
<td style="width: 138px" >App-Benutzer<br> pro <span class="proapp" style="color:grey">7,50</span>€</td>
<td style="width: 62px" class='appanzahl'>75,00€</td>
</tr>
<tr>
<td>Backend-Benutzer<br >pro <span class='probackend'>35,00</span>€</td>
<td class='backendanzahl'>175,00€</td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td >Gesamtpreis mtl.:<br>(zzgl. MwSt)</td>
<td class='summe'>75,00€</td>
</tr>
<tr>
<td >Jährlich<br></td>
<td class='rabatt'></td>
</tr>
</table>
</div>
<script src="./app.js"></script>
</body>
</html>

Just create an applyDiscount function and use it when needed.
This is one example.
Given a price and a discount percentage, you will get the discounted price.
function applyDiscount(price, discountPercent) {
return price - (price / discountPercent);
}
const price = 100;
const discount = 10; // 10%
// Example of 10% discount from price 100
console.log(applyDiscount(price, discount));
// Output: 90

To get rid of all the ifs, technically, you can use a Switch Statement, like this:
switch (true) {
case val < 15:
...
break;
case val < 56:
...
break;
//etc...
case default: //used if the switch doesn't meet any of the other requirements
...
}
But tests have found is method is marginally slower that just using ifs.
So, to conclude:
If performance matters use ifs.
If readability matters, use switch.

my HTML page refreshes after one, two or three iterations. What is wrong?

I am writing a blade stress routine all input fields should be numeric.
The Claculate button will calclate then sometimes refresh (you can see the table fill out coming from the script) the refresh takes out the table answers and all the filled in values.
When it doesn't refresh I can then print the page or change values and hit calculate again. This is the intention of the HTML App.
Is there spmething that I don't know about browsers?
I have tried on Opera with debug on finish the whole Calc1() funtion then keep tracing goes to Opera code so hit F8 and it will sometimes work sometimes refresh the page. I have tried Chrome Firefox is not working propely on the computer will have to reload it.
Thank you for any feedback that can solve this problem.
Here is my code:
<!-- turn on quirks mode for IE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MixPro® BladeStress 3000 & 4000</title>
<style>
label {
display: inline-block;
width: 170px;
}
span {
line-height: 1.0;
}
</style>
</head>
<body>
<section>
<div id="header" style="position: fixed; top: 0; left: 0; width: 100%; height: 10px;">
<div style="margin-top:5px; margin-left:5px; margin-right:5px;">
<div style="width:25%; float:left; text-align:left;"><img src="/tracker/static/mixpro.jpg" alt="MixPro Logo"></div>
<div style="width:50%; float: left; text-align:center; font-family: TeXGyreChorus; font-size: 35px;">
<!-- <div><img src="/tracker/static/vortex.jpg" alt="Squirrel" style="float: left; height:110px;"></div>-->
<div><bold><br>MixPro<sup>®</sup> BladeStress 3000 & 4000</bold></div>
</div>
<div style="width:25%; float: left; text-align:right;"><img src="/tracker/static/mixpro.jpg" alt="MixPro Logo"></div>
</div>
</div>
</section>
<div style="border-style: double; margin-top:150px; margin-left:50px; margin-right:50px; line-height: 1.7;" id='maindiv'>
<form autocomplete="off" style="padding-left: 50px;">
<label for="mpower">Motor Power:</label>
<input type="text" id="mpower"><br>
<label for="slurrySG">Slurry Specific Gravity:</label>
<input type="text" id="slurrySG"><br>
<label for="HSF">Hydraulic Service Factor:</label>
<input type="text" id="HSF"><br>
<label for="TF">Turbine Factor:</label>
<input type="text" id="TF"><br>
<label for="shdia">Shaft Diameter:</label>
<input type="text" id="shdia"><br>
<label for="hubdia">Hub Diameter:</label>
<input type="text" id="hubdia"><br>
<label for="ImpellerType">Impeller Type:</label>
<select id="ImpellerType">
<option value="3300">3300</option>
<option value="3400">3400</option>
<option value="4445">4445</option>
<option value="4490">4490</option>
</select><br>
<label for="pdia">Impeller Diameter:</label>
<input type="text" id="pdia"><br>
<label for="n">Output Speed:</label>
<input type="text" id="n"><br>
<label for="ConnectionType">Connection Type:</label>
<select id="ConnectionType" onchange="ConnectionType1()">
<option value="Bolted">Bolted</option>
<option value="Welded">Welded</option>
</select><br>
<label id="learth" for="earth">Ear Thickness:</label>
<input type="text" id="earth"><br id="bearth">
<label for="bladeth">Blade Thickness:</label>
<input type="text" id="bladeth"><br>
Gusset:
<label style="margin-left:117px;" class="radio-inline">
<input type="radio" onchange="handleClick1();" name="radio1">Yes
</label>
<label class="radio-inline">
<input style="margin-left:-95px;" type="radio" onchange="handleClick2();" name="radio1">No
</label>
<br>
<label style="display: none;" id="lgussth" for="gussth">Gusset Thickness:</label>
<input style="display: none;" type="text" id="gussth" name="gussth"><br style="display: none;" id="bgussth">
<label style="display: none;" id="lnguss" for="nguss">Number of Gussets:</label>
<input style="display: none;" type="text" id="nguss" name="nguss"><br style="display: none;" id="bnguss">
<button style="margin-left:170px; width:80px;" id="Calc" value="Calc" onclick="Calc1()">Calculate</button>
<button style="width:80px;"id="Print" value="Print" onclick="window.print()">Print</button>
<br>
<table style="line-height: 1.2; width:65%;">
<tr>
<th id="stresstitle" style="text-align:left"></th>
</tr>
<tr>
<td id="earstress1"></td>
<td id="earstress2" style="text-align:right"></td>
</tr>
<tr>
<td id="bladestress1"></td>
<td id="bladestress2" style="text-align:right"></td>
</tr>
<tr>
<td id="powerdraw1"></td>
<td id="powerdraw2" style="text-align:right"></td>
</tr>
<tr>
<th id="taper" style="text-align:left"></th>
</tr>
</table>
</form>
</div>
<script language='javascript'>
var gusset = false;
var bolted = true;
var inputvalid = true;
function handleClick1() {
document.getElementById("lgussth").style.display = "inline-block";
document.getElementById("gussth").style.display = "inline";
document.getElementById("bgussth").style.display = "inline";
document.getElementById("lnguss").style.display = "inline-block";
document.getElementById("nguss").style.display = "inline";
document.getElementById("bnguss").style.display = "inline";
gusset = true;
}
function handleClick2() {
document.getElementById("lnguss").style.display = "none";
document.getElementById("nguss").style.display = "none";
document.getElementById("bnguss").style.display = "none";
document.getElementById("lgussth").style.display = "none";
document.getElementById("gussth").style.display = "none";
document.getElementById("bgussth").style.display = "none";
document.getElementById("gussth").value = null;
document.getElementById("nguss").value = null;
gusset = false;
}
function ConnectionType1() {
var x = document.getElementById("ConnectionType").value;
if (x == "Bolted") {
document.getElementById("learth").style.display = "inline-block";
document.getElementById("earth").style.display = "inline";
document.getElementById("bearth").style.display = "inline";
bolted = true;
} else {
document.getElementById("learth").style.display = "none";
document.getElementById("earth").style.display = "none";
document.getElementById("bearth").style.display = "none";
bolted = false;
}
}
function Calc1() {
if (isNaN(document.getElementById("mpower").value)) {
alert("Motor Power Must be a number");
inputvalid = false;
} else {
if (document.getElementById("mpower").value == 0) {
alert("Motor Power Must not be blank");
inputvalid = false;
}
}
if (isNaN(document.getElementById("slurrySG").value)) {
alert("Slurry Specific Gravity Must be a number");
inputvalid = false;
} else {
if (document.getElementById("slurrySG").value == 0) {
alert("Slurry Specific Gravity Must not be blank");
inputvalid = false;
}
}
if (isNaN(document.getElementById("HSF").value)) {
alert("Hydraulic Service Factor Must be a number");
inputvalid = false;
} else {
if (document.getElementById("HSF").value == 0) {
alert("Hydraulic Service Factor Must not be blank");
inputvalid = false;
}
}
if (isNaN(document.getElementById("TF").value)) {
alert("Turbine Factor Must be a number");
} else {
if (document.getElementById("TF").value == 0) {
alert("Turbine Factor Must not be blank");
}
}
if (isNaN(document.getElementById("shdia").value)) {
alert("Shaft Diameter Must be a number");
inputvalid = false;
} else {
if (document.getElementById("shdia").value == 0) {
alert("Shaft Diameter Must not be blank");
inputvalid = false;
}
}
if (isNaN(document.getElementById("hubdia").value)) {
alert("Hub Diameter Must be a number");
inputvalid = false;
} else {
if (document.getElementById("hubdia").value == 0) {
alert("Hub Diameter Must not be blank");
inputvalid = false;
}
}
if (isNaN(document.getElementById("pdia").value)) {
alert("Impeller Diameter Must be a number");
inputvalid = false;
} else {
if (document.getElementById("pdia").value == 0) {
alert("Impeller Diameter Must not be blank");
inputvalid = false;
}
}
if (isNaN(document.getElementById("n").value)) {
alert("Output Speed Must be a number");
inputvalid = false;
} else {
if (document.getElementById("n").value == 0) {
alert("Output Speed Must not be blank");
inputvalid = false;
}
}
if (document.getElementById("ConnectionType").value == "Bolted") {
if (isNaN(document.getElementById("earth").value)) {
alert("Ear Thickness Must be a number");
inputvalid = false;
} else {
if (document.getElementById("earth").value == 0) {
alert("Ear Thickness Must not be blank");
inputvalid = false;
}
}
} else {
document.getElementById("earth").value = "";
}
if (isNaN(document.getElementById("bladeth").value)) {
alert("Blade Thickness Must be a number");
inputvalid = false;
} else {
if (document.getElementById("bladeth").value == 0) {
alert("Blade Thickness Must not be blank");
inputvalid = false;
}
}
if (gusset) {
if (isNaN(document.getElementById("gussth").value)) {
alert("Gusset Thickness Must be a number");
inputvalid = false;
} else {
if (document.getElementById("gussth").value == 0) {
alert("Gusset Thickness Must not be blank");
inputvalid = false;
}
};
if (isNaN(document.getElementById("nguss").value)) {
alert("Number of Gussets Must be a number");
inputvalid = false;
} else {
if (document.getElementById("nguss").value == 0) {
alert("Number of Gussets Must not be blank");
inputvalid = false;
}
}
} else {
document.getElementById("gussth").value = "";
document.getElementById("nguss").value = "";
};
if (inputvalid) {
var hp = Number(document.getElementById("mpower").value);
var sg = Number(document.getElementById("slurrySG").value);
var hsf = Number(document.getElementById("HSF").value);
var tf = Number(document.getElementById("TF").value);
var shdia = Number(document.getElementById("shdia").value);
var hubdia = Number(document.getElementById("hubdia").value);
var imptype = document.getElementById("ImpellerType").value;
var pdia = Number(document.getElementById("pdia").value);
var n = Number(document.getElementById("n").value);
var contype = document.getElementById("ConnectionType").value;
var earth = Number(document.getElementById("earth").value);
var bladeth = Number(document.getElementById("bladeth").value);
var nguss = Number(document.getElementById("nguss").value);
var gussth = Number(document.getElementById("gussth").value);
var pguss = "";
var earlen = 0;
switch(imptype) {
case "3300":
var bladeang = 45;
var nblades = 3;
var npo = 0.3;
var c = 0.6;
var bladefac = 0.16;
if (bolted) {
if (pdia >= 90) {
var earwdth = Math.round(2 * pdia / 11 + .49) / 2;
} else {
var earwdth = Math.round(2 * pdia / 12 + .49) / 2;
}
hubear = hubdia * .85 / Math.sin(bladeang * Math.PI / 180);
if (hubear < earwdth) {
earwdth2 = hubear;
} else {
earwdth2 = earwdth;
}
}
break;
case "3400":
var bladeang = 45;
var nblades = 4;
var npo = 0.37;
var c = 0.7;
var bladefac = 0.16;
if (bolted) {
if (pdia >= 90) {
var earwdth = Math.round(2 * pdia / 11 + .49) / 2;
} else {
var earwdth = Math.round(2 * pdia / 12 + .49) / 2;
}
hubear = hubdia * .85 / Math.sin(bladeang * Math.PI / 180);
if (hubear < earwdth) {
earwdth2 = hubear;
} else {
earwdth2 = earwdth;
}
}
break;
case "4445":
var bladeang = 45;
var nblades = 4;
var npo = 1.27;
var c = 1.2107;
var bladefac = 0.19;
if (bolted) {
var earwdth = Math.round(2 * pdia * 0.095 + .49) / 2;
hubear = hubdia * .85 / Math.sin(bladeang * Math.PI / 180);
if (hubear < earwdth) {
earwdth2 = hubear;
} else {
earwdth2 = earwdth;
}
}
break;
case "4490":
var bladeang = 90;
var nblades = 4;
var npo = 3.64;
var c = 1.97;
var bladefac = 0.19;
if (bolted) {
var earwdth = Math.round(2 * pdia * 0.095 + .49) / 2;
hubear = hubdia * .85 / Math.sin(bladeang * Math.PI / 180);
if (hubear < earwdth) {
earwdth2 = hubear;
} else {
earwdth2 = earwdth;
}
}
break;
}
var bladewdth = bladefac * pdia;
if (bolted) {
earlen = earwdth + earth + .125;
}
var Fa = 0.97 * sg * c * Math.pow((n / 60), 2) * Math.pow((pdia / 12), 4) / nblades;
var Ft = 0.7705 * sg * npo * tf * Math.pow((n / 60), 2) * Math.pow((pdia / 12), 4) / nblades;
var Fra = Fa * Math.cos(bladeang * Math.PI / 180) + Ft * Math.sin(bladeang * Math.PI / 180);
var Fr = (0.8 + 0.2 * hsf) * Fra;
var Mblade = Fr * (0.4 * pdia - 0.5 * hubdia - earlen);
if (bolted) {
var Mear = Fr * (0.4 * pdia - 0.5 * hubdia);
var bladestress = 6 * Mblade / (bladewdth * Math.pow(bladeth, 2));
if (gusset) {
var gussht = Math.round(4 * pdia / 32 + .49) / 4;
var NAxis = (((earth / 2) * earwdth * earth) + ((earth + (gussht / 2)) * gussht * gussth * nguss)) / (earth * earwdth + gussht * gussth * nguss);
var MInert = (((1 / 12) * earwdth * Math.pow(earth, 3)) + (earwdth * earth * Math.pow((NAxis - (earth / 2)), 2))) + ((1 / 12) * nguss * gussth * Math.pow(gussht, 3)) + (nguss * gussth * gussht * Math.pow((NAxis - (earth + (gussht / 2))), 2));
var earstress = Mear * (earth + gussht - NAxis) / MInert;
pguss = "with Gusset(s)";
} else {
var NAxis = earth/2;
var MInert = ((1 / 12) * earwdth * Math.pow(earth, 3));
var earstress = Mear * (earth - NAxis) / MInert;
}
} else {
var NAxis = bladeth/2;
var hubear = hubdia * .85 / Math.sin(bladeang * Math.PI / 180);
if (hubear < bladewdth) {
var earwdth2 = hubear;
} else {
var earwdth2 = bladewdth;
}
var MInert = ((1 / 12) * earwdth2 * (bladeth ^ 3));
var bladestress = 6 * Mblade / (earwdth2 * Math.pow(bladeth, 2));
}
var PD = (npo * sg * tf * Math.pow((n / 60), 3) * Math.pow((pdia * 25.4 / 1000), 5)) / 0.746;
document.getElementById("stresstitle").innerHTML = contype + " Blade MP-"+imptype+ " Impeller "+pguss;
if (bolted) {
document.getElementById("earstress1").innerHTML = "\u03C3, Ear-root (psi)";
document.getElementById("earstress2").innerHTML = earstress.toFixed(2);
}
document.getElementById("bladestress1").innerHTML = "\u03C3, Blade at ear tip (psi)";
document.getElementById("bladestress2").innerHTML = bladestress.toFixed(2);
document.getElementById("powerdraw1").innerHTML = " Impeller Power Draw (hp)";
document.getElementById("powerdraw2").innerHTML = PD.toFixed(2);
if (bolted) {
if (earwdth > earwdth2) {
document.getElementById("taper").innerHTML = "Note: Ear Width tapered at hub weld from "+earwdth+" to "+earwdth2;
}
} else {
if (bladewdth > earwdth2) {
document.getElementById("taper").innerHTML = "Note: Blader Width tapered at hub weld from "+bladewdth+" to "+earwdth2;
}
}
};
}
</script>
</body>
</html>

You're using <form> tag which when a button is clicked causes the brower to refresh. If you are running this as a local file, that is file://mytest.html instead of having it delivered by a server then change the <form> tag to something like a <div>.

javascript variables and functions with arrays for each html formel

is it possible to reuse this javascript
<script>
var speed = 100;
var gold = 0;
gold = parseFloat(gold.toFixed(2));
var production = 10;
production = parseFloat(production.toFixed(0));
var price = 100;
price = parseFloat(price.toFixed(2));
document.getElementById("speed").innerHTML=speed;
document.getElementById("gold").innerHTML = gold;
document.getElementById("production").innerHTML=production;
document.getElementById("price").innerHTML=price;
function dig() {
var elem = document.getElementById("bar");
var width = 0;
var id = setInterval(frame, speed);
function frame() {
if (width >= 100) {
clearInterval(id);
elem.style.width = '0%';
gold = gold + production;
gold = parseFloat(gold.toFixed(2));
document.getElementById("dig").disabled = false;
document.getElementById("gold").innerHTML = gold;
if (price <= gold) {
document.getElementById("upgrade").disabled = false;
} else {
document.getElementById("upgrade").disabled = true;
}
} else {
width++;
elem.style.width = width + '%';
document.getElementById("dig").disabled = true;
}
}
}
$(document).ready(function priceUpgrade() {
if (price <= gold) {
document.getElementById("upgrade").disabled = false;
} else {
document.getElementById("upgrade").disabled = true;
}
});
$(document).ready(function upgrade(){
$("#upgrade").click(function(){
speed = speed - 10;
gold = gold - price;
gold = parseFloat(gold.toFixed(2));
production += production * 0.10;
production = parseFloat(production.toFixed(0));
price += price * 0.50;
price = parseFloat(price.toFixed(2));
document.getElementById("speed").innerHTML=speed;
document.getElementById("gold").innerHTML=gold;
document.getElementById("production").innerHTML=production;
document.getElementById("price").innerHTML=price;
if (price <= gold) {
document.getElementById("upgrade").disabled = false;
} else {
document.getElementById("upgrade").disabled = true;
}
});
});
</script>
with a new value in the variables speed, gold and production for each new html line of these
<div id="speed">100</div>
<div class="row">
<div class="col-md-2">
<div id="production"></div>
<button type="button" class="btn btn-success" onclick="dig()" id="dig">Gull Sil</button>
</div>
<div class="col-md-7">
<div id="progress">
<div id="bar"></div>
</div>
</div>
<div class="col-md-3">
<div id="price"></div>
<button type="button" class="btn btn-warning" onclick="upgrade()" id="upgrade">Oppgrader</button>
</div>
</div>
so each time a call speed[3] or dig(3) both the variables and the functions response different to each key=>value in an array or some how??
maybe var speed {1:10,2:30,3:70,4:150};
and dig([1,2,3,4]);

Calculate Total OnClick Custom Calculator

I just started learning javascript (sorry if my code is a mess) to be able to make a custom calculator and incorporate it in HTML.
I want my calculator to be able to calculate a men's/women's wilks through the user's inputs; however, I can't seem to get the value to display after clicking the calculate button.
The code works by taking in a body weight and total in either kg or pounds, since the formula uses kg if the user inputs in pounds then I convert their inputs to kg. The formula also depends on whether the person is a female or male. Both sex and units are chosen from dropdown menus.
Any help with making the calculate button work would be appreciated.
<script>
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
if (document.getElementById('units').value === 'lb'){
var weight = (weight * 0.453592)
var total = (total * 0.453592)
}
if (document.getElementById('sex').value === 'female'){
var a = 594.31747775582;
var b = -27.23842536447;
var c = 0.82112226871;
var d = -0.00930733913;
var e = 4.731582e-05;
var f = -9.054e-08;
}
if (document.getElementById('sex').value === 'male'){
var a = -216.0475144;
var b = 16.2606339;
var c = -0.002388645;
var d = -0.00113732;
var e = 7.01863e-06;
var f = -1.291E-08;
}
var coeff = (500) / ((a) + (b * weight) + (c * Math.pow(weight, 2)) + (d * Math.pow(weight, 3)) + (e * Math.pow(weight, 4)) + (f * Math.pow(weight, 5)));
var wilks = (coeff * total)
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
</script>
<body>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</body>

Try this
var a=0,b=0,c=0,d=0,e=0,f=0;
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
if (document.getElementById('units').value === 'lb'){
weight = (weight * 0.453592)
total = (total * 0.453592)
}
if (document.getElementById('sex').value === 'female'){
a = 594.31747775582;
b = -27.23842536447;
c = 0.82112226871;
d = -0.00930733913;
e = 4.731582e-05;
f = -9.054e-08;
}else{
a = -216.0475144;
b= 16.2606339;
c= -0.002388645;
d = -0.00113732;
e = 7.01863e-06;
f = -1.291E-08;
}
var coeff = (500) / ((a) + (b * weight) + (c * Math.pow(weight, 2)) + (d * Math.pow(weight, 3)) + (e * Math.pow(weight, 4)) + (f * Math.pow(weight, 5)));
var wilks = (coeff * total);
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
}
<body>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</body>

Try this:
<script>
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
if (document.getElementById('units').value === 'lb'){
var weight = (weight * 0.453592)
var total = (total * 0.453592)
}
if (document.getElementById('sex').value === 'female'){
var a = 594.31747775582;
var b = -27.23842536447;
var c = 0.82112226871;
var d = -0.00930733913;
var e = 4.731582e-05;
var f = -9.054e-08;
}
else{
var a = -216.0475144;
var b = 16.2606339;
var c = -0.002388645;
var d = -0.00113732;
var e = 7.01863e-06;
var f = -1.291E-08;
}
var coeff = (500) / ((a) + (b * weight) + (c * Math.pow(weight, 2)) + (d * Math.pow(weight, 3)) + (e * Math.pow(weight, 4)) + (f * Math.pow(weight, 5)));
var wilks = (coeff * total)
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
}
</script>
<body>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</body>

Try this:
<script>
function computeWilks(){
var weight = document.getElementById('weight').value;
var total = document.getElementById('total').value;
var values = {
a: { m: -216.0475144, f: 594.31747775582 },
b: { m: 16.2606339, f: -27.23842536447 },
c: { m: -0.002388645, f: 0.82112226871 },
d: { m: -0.00113732, f: -0.00930733913 },
e: { m: 7.01863e-06, f: 4.731582e-05 },
f: { m: -1.291E-08, f: -9.054e-08 }
}
if (document.getElementById('units').value === 'lb'){
var weight = (weight * 0.453592)
var total = (total * 0.453592)
}
var indexx = (document.getElementById('sex').value === 'female') ? 'f' : 'm'
var coeff = (500) / ((values.a[indexx]) + (values.b[indexx] * weight) + (values.c[indexx] * Math.pow(weight, 2)) + (values.d[indexx] * Math.pow(weight, 3)) + (values.e[indexx] * Math.pow(weight, 4)) + (values.f[indexx] * Math.pow(weight, 5)));
var wilks = (coeff * total)
document.getElementById('wilks').innerHTML = "Wilks = " + wilks;
}
</script>
Hope this helps.

Javascript: Get Typeerror - element is null

I have a BMI calculator in Wordpress, that get's the
Typeerror:
result is null and
health is null
The calculator works fine in fiddle https://jsfiddle.net/2au9y34x/2/
but don't on Wordpress. I have placed the script in the footer, so that the HTML is read first, so that is not where the problem is.
Can anyone help solve this problem?
Javascript is:
<script type='text/javascript'>
var form = document.querySelector('form[name=bmi]');
var onSubmit = function(event) {
event.preventDefault();
var healthMessage;
var result = form.querySelector('.result');
var health = form.querySelector('.health');
var weight = parseInt(form.querySelector('input[name=weight]').value, 10);
var height = parseInt(form.querySelector('input[name=height]').value, 10);
var bmi = (weight / (height / 100 * height / 100)).toFixed(1);
if (bmi < 18.5) {
healthMessage = 'undervægtig';
} else if (bmi > 18.5 && bmi < 25) {
healthMessage = 'normal vægtig';
} else if (bmi > 25) {
healthMessage = 'overvægtig';
}
result.innerHTML = bmi;
health.innerHTML = healthMessage;
}
form.addEventListener('submit', onSubmit, false);
</script>
HTML is:
<form name="bmi">
<h1>Mål dit BMI:</h1>
<label>
<input type="text" name="weight" id="weight" placeholder="Vægt (kg)">
<input type="text" name="height" id="height" placeholder="Højde (cm)">
<input type="submit" name="submit" id="submit" value="Udregn BMI">
</label>
<div class="calculation">
<div>
Dit BMI er: <span class="result"></span>
</div>
<div>
Dette betyder at du er: <span class="health"></span>
</div>
</div>
</form>

Add the javascript after the closing tag of form
OR you can try this
window.onload = function() {
var form = document.querySelector('form[name=bmi]');
var onSubmit = function(event) {
event.preventDefault();
var healthMessage;
var result = form.querySelector('.result');
var health = form.querySelector('.health');
var weight = parseInt(form.querySelector('input[name=weight]').value, 10);
var height = parseInt(form.querySelector('input[name=height]').value, 10);
var bmi = (weight / (height / 100 * height / 100)).toFixed(1);
if (bmi < 18.5) {
healthMessage = 'undervægtig';
} else if (bmi > 18.5 && bmi < 25) {
healthMessage = 'normal vægtig';
} else if (bmi > 25) {
healthMessage = 'overvægtig';
}
result.innerHTML = bmi;
health.innerHTML = healthMessage;
}
form.addEventListener('submit', onSubmit, false);
}