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.

how to get invoice values to google sheet

jQuery(document).ready(function() {
jQuery().invoice({
addRow: "#addRow",
delete: ".delete",
parentClass: ".item-row",
no: ".no",
price: ".price",
qty: ".qty",
total: ".total",
totalQty: "#totalQty",
subtotal: "#subtotal",
discount: "#discount",
shipping: "#shipping",
grandTotal: "#grandTotal"
});
});
(function(jQuery) {
$.opt = {}; // jQuery Object
jQuery.fn.invoice = function(options) {
var ops = jQuery.extend({}, jQuery.fn.invoice.defaults, options);
$.opt = ops;
var inv = new Invoice();
inv.init();
jQuery('body').on('click', function(e) {
var cur = e.target.id || e.target.className;
if (cur == $.opt.addRow.substring(1))
inv.newRow();
if (cur == $.opt.delete.substring(1))
inv.deleteRow(e.target);
inv.init();
});
jQuery('body').on('keyup', function(e) {
inv.init();
});
return this;
};
}(jQuery));
function Invoice() {
self = this;
}
Invoice.prototype = {
constructor: Invoice,
init: function() {
this.calcTotal();
this.calcTotalQty();
this.calcSubtotal();
this.calcGrandTotal();
},
/**
* Calculate total price of an item.
*
* #returns {number}
*/
calcTotal: function() {
jQuery($.opt.parentClass).each(function(i) {
var row = jQuery(this);
var total = row.find($.opt.price).val() * row.find($.opt.qty).val();
total = self.roundNumber(total, 2);
row.find($.opt.total).val(total);
});
return 1;
},
/***
* Calculate total quantity of an order.
*
* #returns {number}
*/
calcTotalQty: function() {
var totalQty = 0;
jQuery($.opt.qty).each(function(i) {
var qty = jQuery(this).val();
if (!isNaN(qty)) totalQty += Number(qty);
});
totalQty = self.roundNumber(totalQty, 2);
jQuery($.opt.totalQty).val(totalQty);
return 1;
},
/***
* Calculate subtotal of an order.
*
* #returns {number}
*/
calcSubtotal: function() {
var subtotal = 0;
jQuery($.opt.total).each(function(i) {
var total = jQuery(this).val();
if (!isNaN(total)) subtotal += Number(total);
});
subtotal = self.roundNumber(subtotal, 2);
jQuery($.opt.subtotal).val(subtotal);
return 1;
},
/**
* Calculate grand total of an order.
*
* #returns {number}
*/
calcGrandTotal: function() {
var grandTotal = Number(jQuery($.opt.subtotal).val()) +
Number(jQuery($.opt.shipping).val()) -
Number(jQuery($.opt.discount).val());
grandTotal = self.roundNumber(grandTotal, 2);
jQuery($.opt.grandTotal).val(grandTotal);
return 1;
},
/**
* Add a row.
*
* #returns {number}
*/
newRow: function() {
jQuery(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-btn"><a class=' + $.opt.delete.substring(1) + ' href="javascript:;" title="Remove row">X</a><input type="text" class="form-control no p-0 text-center" placeholder="No" type="text"></div></td><td class="item-name"><input type="text" class="form-control item p-0" placeholder="Item" type="text"></td><td><input class="form-control qty p-0 text-center" placeholder="Qty" type="text"></td><td><input class="form-control price p-0 text-center" placeholder="Price" type="text"></td><td><input class="form-control total" type="text" readonly></td></tr>');
if (jQuery($.opt.delete).length > 0) {
jQuery($.opt.delete).show();
}
return 1;
},
/**
* Delete a row.
*
* #param elem current element
* #returns {number}
*/
deleteRow: function(elem) {
jQuery(elem).parents($.opt.parentClass).remove();
if (jQuery($.opt.delete).length < 2) {
jQuery($.opt.delete).hide();
}
return 1;
},
/**
* Round a number.
* Using: http://www.mediacollege.com/internet/javascript/number/round.html
*
* #param number
* #param decimals
* #returns {*}
*/
roundNumber: function(number, decimals) {
var newString; // The new rounded number
decimals = Number(decimals);
if (decimals < 1) {
newString = (Math.round(number)).toString();
} else {
var numString = number.toString();
if (numString.lastIndexOf(".") == -1) { // If there is no decimal point
numString += "."; // give it one at the end
}
var cutoff = numString.lastIndexOf(".") + decimals; // The point at which to truncate the number
var d1 = Number(numString.substring(cutoff, cutoff + 1)); // The value of the last decimal place that we'll end up with
var d2 = Number(numString.substring(cutoff + 1, cutoff + 2)); // The next decimal, after the last one we want
if (d2 >= 5) { // Do we need to round up at all? If not, the string will just be truncated
if (d1 == 9 && cutoff > 0) { // If the last digit is 9, find a new cutoff point
while (cutoff > 0 && (d1 == 9 || isNaN(d1))) {
if (d1 != ".") {
cutoff -= 1;
d1 = Number(numString.substring(cutoff, cutoff + 1));
} else {
cutoff -= 1;
}
}
}
d1 += 1;
}
if (d1 == 10) {
numString = numString.substring(0, numString.lastIndexOf("."));
var roundedNum = Number(numString) + 1;
newString = roundedNum.toString() + '.';
} else {
newString = numString.substring(0, cutoff) + d1.toString();
}
}
if (newString.lastIndexOf(".") == -1) { // Do this again, to the new string
newString += ".";
}
var decs = (newString.substring(newString.lastIndexOf(".") + 1)).length;
for (var i = 0; i < decimals - decs; i++)
newString += "0";
//var newNumber = Number(newString);// make it a number if you like
return newString; // Output the result to the form field (change for your purposes)
}
};
.delete-btn {
position: relative;
}
.delete {
display: block;
color: #000;
text-decoration: none;
position: absolute;
background: #EEEEEE;
font-weight: bold;
padding: 2px 8px;
border: none;
border-radius: 5px;
top: -1px;
left: -16px;
font-family: Verdana;
font-size: 15px;
}
<script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<link href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" rel="stylesheet" />
<table class="table compact table-border cell-border">
<tr class="item-row">
<th class="headNo">No</th>
<th class="headItem">Item</th>
<th class="headQty">Qty</th>
<th class="headPrice">Price</th>
<th class="headTotal">Amount</th>
</tr>
<tbody id="row">
<tr id="hiderow">
<td colspan="5">
<a id="addRow" href="javascript:;" title="Add a row" class="button">+</a>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-right"><strong>Sub Total</strong></td>
<td><input id="subtotal"></td>
</tr>
<tr>
<td><strong>Total Quantity: </strong><span id="totalQty">0</span> Units</td>
<td></td>
<td></td>
<td class="text-right"><strong>Discount</strong></td>
<td><input class="form-control" id="discount" value="0" type="text"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-right"><strong>Shipping</strong></td>
<td><input class="form-control" id="shipping" value="0" type="text"></td>
</tr>
<tr>
<td colspan="3"></td>
<td class="text-center"><strong>Total</strong></td>
<td><input id="grandTotal" class="form-control text-right" type="text" readonly></td>
</tr>
</tbody>
</table>
<button id="btn">Submin</button>
code of invoice in snippet
"No,Item,qty,Price,Amount" works prefect in client side and value of "No,Item,qty,Price,Amount" shown in console but i want to transfer "No,Item,qty,Price,Amount" values in google sheet. I tried using jquery but it only transfer one row data and repeat first row data in second row.How can i do that?

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>.

Weapon damage range calculator no error but it's not working

Because I'm too lazy to calculate every time I decided to make a calculator with jquery.
For some reason it's not working and I don't know why so I'm here to ask you guys for help.
Here's a jsfiddle link
Damage Formula:
AbaseEq: Damage Range of weapon (e.g: 800~1000)
up difference: weapon up- armor up (e.g: 5-3:2 -> up difference:2 -> 15% if difference was 1 it would be 10%)
Aeq: AbaseEq(1+up difference in %)
Codes:
<table>
<tr>
<td>
<label>Base Attack (Without any equipment equipped): </label>
</td>
<td>
<input placeholder="e.g: 290" id="abase">
</td>
</tr>
<tr>
<td>
<label>Weapon Attack Range: </label>
</td>
<td>
<input placeholder="e.g: 800-1000" id="abaseeq">
</td>
</tr>
<tr>
<td>
<label>Weapon + ?</label>
</td>
<td>
<input placeholder="e.g: 9" id="weapon+">
</td>
</tr>
<tr>
<td>
<label>Enemy Defence + ? </label>
</td>
<td>
<input placeholder="e.g: 6" id="enemydef+">
</td>
</tr>
<tr>
<td>
<button id="calculate">
Calculate
</button>
</td>
<td>
<div id="result"></div>
</td>
</tr>
</table>
$(document).ready(function() {
$('#calculate').on('click', function() {
var abase = $('#abase').val();
var abaseEq = $('#abaseeq').val();
var abaseEqLength = abaseEq.length;
abaseEqLength -= 1;
var weaponlvl = $('#weaponup').val();
var enemydeflvl = $('#enemydefup').val();
var weaponup=parseInt(weaponlvl);
var enemydefup=parseInt(enemydeflvl);
var updifference = weaponup - enemydefup;
var plusdifference = [0, '10%', '15%', '22%', '32%', '43%', '54%', '65%', '90%', '120%', '200%'];
var negdifference = {};
var result;
var aeqmin=0;
var aeqmax=0;
var lowestdamage="";
var maxdamage="";
var negindex;
var negindexplus = 0;
for (var i = 0; i <= abaseEqLength; i++) {
if (abaseEq[i] == '-') {
negindex = i;
negindexplus += (negindex + 1);
}
}
for (var x = 0; x < negindex; x++) {
lowestdamage = lowestdamage + abaseEq[x];
console.log("Lowest Damage: " + lowestdamage);
}
for (var y = negindexplus; y <= abaseEqLength; y++) {
maxdamage = maxdamage + abaseEq[y];
console.log("Max Damage: " + maxdamage);
}
if (updifference => 0 && updifference <= 10) {
updifference = plusdifference[updifference];
console.log("updifference: "+updifference);
result = "pos";
}
if (updifference < 0 && updifference >= -10) {
var negarray = negdifference * -1;
negdifference[updifference] = plusdifference[negarray];
}
var mindamage = parseInt(lowestdamage);
var maxidamage = parseInt(maxdamage);
if (result == "pos") {
aeqmin = mindamage * (1 + plusdifference[updifference]);
aeqmax = maxidamage * (1 + plusdifference[updifference]);
}
if (aeqmax > 0) {
$('#result').html = aeqmin + "~" + aeqmax;
}
}); // calculate on click function
}); // document ready

Calculator HTML form using Javascript

i have a little issue. That's my code and i don't know what i have made wrong. I try to complete a simple HTML form to calculate a given number in a text input html element.
function rebate(){
var rebate_a,rebate_b,total,final;
var a = document.myform.rebatenum.value;
if( a <= 3000 )
{
final = a;
}
else if ( (a > 3000) && (a <= 10000 ) )
{
rebate_a = (a-3000) * 0.02;
total = rebate_a;
final = a - rebate_a;
}
else if ( (a > 10000) && (a <= 30000 ) )
{
rebate_a = (7000 * 0.02) + (a-10000) * 0.03;
total = rebate_a;
final = a - rebate_a;
}
else if ( (a > 30000) && (a <= 40000 ) )
{
rebate_a = (7000 * 0.02) + (20000 * 0.03) + (a-30000) * 0.05;
total = rebate_a;
final = a - rebate_a;
}
else if( (a >= 40000) && (a < 50000 ))
{
rebate_a = (7000 * 0.02) + (20000 * 0.03) + (10000 * 0.05) + (a-40000) * 0.06;
rebate_b = 25;
total = rebate_a + rebate_b;
final = a - total;
}
else
{
document.myform.final.value = "20";
}
document.getElementById("demo").innerHTML = a;
document.myform.final.value = final;
}
<form name="myform">
<table border="0">
<tr>
<td>Initial Price</td>
<td><input name="rebatenum" type="text" size="12" onchange="rebate();"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Υπολογισμός" onclick="rebate();"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>Final Price after rebate:</td>
<td><input type="text" name="final" size="12"></td>
</tr>
</table>
</form>
<p id="demo"></p>
You can find it also here!!!
http://jsfiddle.net/pf7Lysqt/3/