Calculate Total OnClick Custom Calculator - javascript

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.

Related

Loop through the sum of the two inputs until in doubled (javascript)

I am stuck here with duch issue. There are 2 two entry boxes are for an amount and an interest rate (%).
If you click on the button, the page will show an overview of the balance until the amount have to be doubled.
Taking a simple numbers forexample 10 - is amount and 4 - is 4% intereste rate. So the result have to stop on amount of 20.
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = 1; i <= doubleS; i++) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>

The issue is with your for loop bounds.
This will loop doubleX number of times: for (var i = 0; i < doubleX; i++)
This will loop until x surpasses doubleX: for (;x < doubleX;), which btw is better written with a while loop: while (x < doubleX)
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
result.innerHTML = '';
while (s < doubleS) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>

Easiest way is to just use a for loop without the convoluted math with s in the middle:
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = s; i <= doubleS; i *= ((r / 100) + 1)) {
result.innerHTML += i + "<br>";
}
}

use a while loop and check is the value of s is bigger than or equal to doubleS
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
while(true) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
if(s >= doubleS){
break
}
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>

Function displaying NaN in text box

I created a function that calculates the final cost of an order, and I'm trying to display it in a text box. However, the text box keeps returning "$ NaN" and I cannot find the error. I'm a very beginning student of html and js, so any explanation is appreciated.
function costCalculator() {
totalCost = (totalCost + burgerOnePrice * Number(burgerOne.value));
totalCost = (totalCost + burgerTwoPrice * Number(burgerTwo.value));
totalCost = (totalCost + burgerThreePrice * Number(burgerThree.value));
totalCost = totalCost * (1 + tip);
if (useCard == 1) {
if (Number(balance.value) >= totalCost) {
totalCost = 0;
cardBalance = cardBalance - totalCost;
balance.value = cardBalance;
finalCost.value = totalCost;
} else {
totalCost = (totalCost - Number(balance.value));
balance.value = 0;
finalCost.value = totalCost;
}
}
document.getElementById("finalCost").value= "$ "+parseFloat(this.totalCost).toFixed(2);
document.getElementById("balance").value= "$ "+parseFloat(this.balance).toFixed(2);
}
Here's the button that calls the function and the text box that I want it to appear it:
<button id="totalSales" onclick = "costCalculator();" >Calculate Total</button>
<br><br>
<input type="text" id="finalCost" value="" size="3" readonly="true" />

You should check console log or run debugger (F12) first - lot of bugs / missing info at least in question here, but in case I put something instead of all missing items, it starts to run without code errors at least ;-)
var burgerOnePrice = 123,
burgerTwoPrice = 234,
burgerThreePrice = 345,
tip = 456,
useCard = 1;
function costCalculator() {
var totalCost = 0,
f = document.forms[0],
balance = { value: f.balance.value.replace(/[$ ]/,'') },
burgerOne = f.burgerOne,
burgerTwo = f.burgerTwo,
burgerThree = f.burgerThree;
totalCost = (totalCost + burgerOnePrice * Number(burgerOne.value));
totalCost = (totalCost + burgerTwoPrice * Number(burgerTwo.value));
totalCost = (totalCost + burgerThreePrice * Number(burgerThree.value));
totalCost = totalCost * (1 + tip);
if (useCard == 1) {
if (Number(balance.value) >= totalCost) {
totalCost = 0;
cardBalance = cardBalance - totalCost;
balance.value = cardBalance;
f.finalCost.value = totalCost;
} else {
totalCost = (totalCost - Number(balance.value));
balance.value = 0;
f.finalCost.value = totalCost;
}
}
document.getElementById("finalCost").value = "$ " + parseFloat(totalCost).toFixed(2);
document.getElementById("balance").value = "$ " + parseFloat(balance.value).toFixed(2);
}
<form>
<input type="button" id="totalSales" onclick = "costCalculator();" value="Calculate Total">
<br><br>
<input name="burgerOne" value="1">
<input name="burgerTwo" value="2">
<input name="burgerThree" value="3">
<input type="text" id="finalCost" value="" size="3" readonly="true" />
<input id="balance" value="$ 100000">
</form>

Javascript mathematics with decimal calculation

I have a weird problem with javascript mathematics here is my code :
<script>
function four() {
var price = document.getElementById("price").value;
var sood = (price * 2.5) / 100;
var pricetopay = price + sood ;
var pishpardakht = pricetopay / 3;
document.getElementById("PISH").value = pishpardakht;
var mabaghi = pricetopay - pishpardakht;
var ghest = mabaghi / 4;
document.getElementById("GHEST").value = ghest;
}
</script>
and when the price is 100 ( price = 100 )
pish : 334.1666666666667
ghest : 167.08333333333331
how can i fix that ?

Here's a solution you had to parse the value that you get from your element.
function four() {
var priceUnparsed = document.getElementById("price").value;
var price= parseFloat(priceUnparsed );
var sood = (price * 2.5) / 100;
var pricetopay = price + sood ;
var pishpardakht = pricetopay / 3;
alert(pishpardakht);
document.getElementById("PISH").value = pishpardakht;
var mabaghi = pricetopay - pishpardakht;
var ghest = mabaghi / 4;
document.getElementById("GHEST").value = ghest;
}
<input id="price" value="100">
<button onclick="four()">Go</button>

Generate all results in one button click - Javascript

Just to start let me just say in not good at Javascript.
I am developing a simple ROI calculator where when someone enter the number of devices for his network support company it will show the user his current cost and the cost that we provide the service for. The problem is that when i press generate cost all the information do not get generated all at once. I have to click the "Generate cost" button twice more to get all the result.
I have to click the "Generate cost" button twice more to get the result for our cost and our saving.
I just want to know how i can make sure that when i click the button all the text boxes gets populated rather than me clicking twice more to generate the rest of the results.
I have generated the file here : http://codepen.io/anon/pen/PwpePX
HTML
<h1 style="font-size:40px;text-align:center;">ROI Calculator</h1>
<br/>
<div style="float:left;">
<h1>Your Cost</h1>
Total no. of managed servers
<input type="roi_text" id="value1" name="value1" value="" />
<br/>Total no. of network devices
<input type="roi_text" id="value2" name="value2" value="" />
<br/>Total no. of workstations
<input type="roi_text" id="value3" name="value3" value="" />
<br/>No of service desk users
<input type="roi_text" id="value4" name="value4" value="" />
<br/>How many engineers do you have?
<input type="roi_text" id="value5" name="value5" value="" />
<br/>Average salary of your engineers*
<input type="roi_text" id="value6" name="value6" value="" />
<br/>Average on-call allowance per month?
<input type="roi_text" id="value7" name="value7" value="" />
<br/>
<br/>Your Current Cost
<input type="roi_text" id="answer" name="answer" value="" disabled="disabled" />
</div>
<div style="float:left;">
<h1>Our Cost</h1>
NOC =
<input type="roi_text" id="answer1" name="answer1" value="" disabled="disabled" />
<br/>Out of Hour NOC =
<input type="roi_text" id="answer2" name="answer2" value="" disabled="disabled" />
<br/>24/7 Service desk =
<input type="roi_text" id="answer3" name="answer3" value="" disabled="disabled" />
<br/>Out of Hours SD =
<input type="roi_text" id="answer4" name="answer4" value="" disabled="disabled" />
<br/>Our cost =
<input type="roi_text" id="answer5" name="answer5" value="" />
<br/>
<br/>
<br/>Total Savings =
<input type="roi_text" id="answer7" name="answer7" value="" />
<input type="button" name="Sumbit" value="GENERATE COST" onclick="javascript:addNumbers();" />
JAVASCRIPT
function addNumbers() {
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var val5 = parseInt(document.getElementById("value5").value);
var val6 = parseInt(document.getElementById("value6").value);
var val7 = parseInt(document.getElementById("value7").value);
var noc1 = parseInt(document.getElementById("answer1").value);
var oohnoc1 = parseInt(document.getElementById("answer2").value);
var sd1 = parseInt(document.getElementById("answer3").value);
var oohsd1 = parseInt(document.getElementById("answer4").value);
var ansD1 = parseInt(document.getElementById("answer").value);
var inbaycost1 = parseInt(document.getElementById("answer5").value);
var ansD = document.getElementById("answer");
ansD.value = (val5 * val6 + val7 * 12);
var noc = document.getElementById("answer1");
noc.value = ((val1 * 25 + val2 * 10 + val3 * 5) * 12);
var oohnoc = document.getElementById("answer2");
oohnoc.value = ((val1 * 15 + val2 * 5 + val3 * 3.5) * 12);
var sd = document.getElementById("answer3");
sd.value = ((val4 * 15) * 12);
var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);
var inbaycost = document.getElementById("answer5");
inbaycost.value = (noc1 + oohnoc1 + sd1 + oohsd1);
var totalsaving = document.getElementById("answer7");
totalsaving.value = (ansD1 - inbaycost1); }
Will appericiate any help to sort this issue.
Many thanks

You are making in wrong order.
Example: you take te value of "answer4"
var oohsd1 = parseInt(document.getElementById("answer4").value);
then calculate its value
var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);
This is how it works
function addNumbers() {
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var val5 = parseInt(document.getElementById("value5").value);
var val6 = parseInt(document.getElementById("value6").value);
var val7 = parseInt(document.getElementById("value7").value);
var noc = document.getElementById("answer1");
noc.value = ((val1 * 25 + val2 * 10 + val3 * 5) * 12);
var noc1 = parseInt(document.getElementById("answer1").value);
var oohnoc = document.getElementById("answer2");
oohnoc.value = ((val1 * 15 + val2 * 5 + val3 * 3.5) * 12);
var oohnoc1 = parseInt(document.getElementById("answer2").value) ;
var sd = document.getElementById("answer3");
sd.value = ((val4 * 15) * 12);
var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);
var oohsd1 = parseInt(document.getElementById("answer4").value);
var sd1 = parseInt(document.getElementById("answer3").value);
var inbaycost = document.getElementById("answer5");
inbaycost.value = (noc1 + oohnoc1 + sd1 + oohsd1);
var ansD = document.getElementById("answer");
ansD.value = (val5 * val6 + val7 * 12);
var ansD1 = parseInt(document.getElementById("answer").value);
var inbaycost1 = parseInt(document.getElementById("answer5").value);
var totalsaving = document.getElementById("answer7");
totalsaving.value = (ansD1 - inbaycost1);
}
Link: http://codepen.io/anon/pen/xbqjXpv

Adding values in a checkbox, textbox and select using javascript

How will I add my checkbox value to the list of being added? If it is checked, it will be added to the total, if unchecked it will not be added. Or if it is already checked, then the customer unchecked it it will be deducted from the total.
javascript
function subtotal(){
$("#as").on('change',function(event){
var as = $(event.target).val();
var txt1 = $('#sff').val();
var txt2 = $('#osf').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#st').val(total.toFixed(2));
});
HTML
<input type="text" id="txt1"/> //automatically shows value depending on a dropdownmenu
<input type="text" id="txt2"/> /automatically shows value depending on a dropdownmenu
<input type="text" id="gt"/> //this is where the answers shows
<input type="checkbox" id="cbx3"/>
<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
the total should be equivalent to, textbox1 + textbox2 + dropdownmenu + checkbox
I have managed to add the textboxes and dropdown, the concern now is the checkbox.
thankyou...

After fixing ids of relevant items, this code calculates result
$("#as").on('change', function(event) {
var as = $(event.target).val();
var txt1 = 0;
var txt2 = 0;
if ($('#txt1').val())
txt1 = $('#txt1').val();
if ($('#txt2').val())
txt2 = $('#txt2').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
}
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#gt').val(total.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" />
<br />
<input type="text" id="txt2" />
<br />
<input type="text" id="gt" />
<br />
<input type="checkbox" id="cbx3" value="5" />
<br />
<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<br />

your html is not clear.. please read comment line carefully and try this..
$("#as").on('change',function(){
var as = $(this).val(); //selected value on dropdown change
var txt1 = $('#sff').val(); // need to give the id of html element(not in your given html)
var txt2 = $('#osf').val(); // need to give the id of html element(not in your given html)
var d = 0;
if ($('#cbx3').is(":checked"))
d = parseFloat($("#cbx3").val(), 10); //it get the value from cbx3 element when it is checked otherwise value is 0
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#gt').val(total.toFixed(2));
});

You should have the calculation in a function that is called whenever the dropdown or the checkbox are changed. You can call the same function when initializing.
function subtotal(){
var as = $("#as").val();
var txt1 = $('#sff').val();
var txt2 = $('#osf').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#st').val(total.toFixed(2));
};
$("#as").on('change',function(event){
subtotal();
}
$('#cbx3').click(function(){
subtotal();
});

js fiddle example
$("#as").on('change', function (event) {
subtotal();
});
$("#cbx3").click(function () {
subtotal();
});
function subtotal() {
var as = $("#as").val();
var txt1 = $('#txt1').val();
var txt2 = $('#txt2').val();
var d = 0;
if ($('#cbx3').is(":checked")) {
d = parseFloat($("#cbx3").val(), 10);
var a = parseFloat(as, 10);
var b = parseFloat(txt1, 10);
var c = parseFloat(txt2, 10);
var total = parseFloat(a, 10) + parseFloat(b, 10) + parseFloat(c, 10) + d;
$('#gt').val(total);
}
else {
$('#gt').val("0");
}
}
Try this above code

This should give you an idea.
(function () {
var $txt1 = $('#txt1');
var $txt2 = $('#txt2');
var $as = $('#as');
var $cbx3 = $('#cbx3');
var total = 0;
function calc() {
var as = Number($as.val());
var txt1 = Number($txt1.val());
var txt2 = Number($txt2.val());
total = txt1 + txt2;
if ($cbx3.is(":checked")) {
total += as;
}
$('#gt').val(total.toFixed(2));
}
$('#txt1, #txt2, #as').on('keyup', function () {
calc();
});
$('#cbx3, #as').on('change', function () {
calc();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="text" id="txt1" /></div>
<div><input type="text" id="txt2" /></div>
<div><input type="text" id="gt" /></div>
<input type="checkbox" id="cbx3" />
<select id="as">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>

Categories