So I'm trying to take two values, sum them and then multiply by 250. The first value is a negative number and the second is positive. For example:
-Hunger + Hunger2 * 250 =
I'm new to coding like this and not sure what I have messed up. Can someone please provide some insight?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ARK STAT CALCULATOR</title>
</head>
<body>
<form id="stat" action="">
<fieldset>
<legend>ARK STAT Calculator</legend>
<p>
<label for="Health">Base-Health</label>
<input id="Health" name="Health" type="number" />
<label for="Health2">Next Value</label>
<input id="Health2" name="Health2" type="number" />
</p>
<p>
<label for="Stamina">Base-Stamina</label>
<input id="Stamina" name="Stamina" type="number" />
<label for="Stamina2">Next Value</label>
<input id="Stamina2" name="Stamina2" type="number" />
</p>
<p>
<label for="Oxygen">Base-Oxygen</label>
<input id="Oxygen" name="Oxygen" type="number" />
<label for="Oxygen2">Next Value</label>
<input id="Oxygen2" name="Oxygen2" type="number" />
</p>
<p>
<label for="Food">Base-Food</label>
<input id="Food" name="Food" type="number" />
<label for="Food2">Next Value</label>
<input id="Food2" name="Food2" type="number" />
</p>
<p>
<label for="Weight">Base-Weight</label>
<input id="Weight" name="Weight" type="number" />
<label for="Weight2">Next Value</label>
<input id="Weight2" name="Weight2" type="number" />
</p>
<p>
<label for="Melee">Base-Melee Damage</label>
<input id="Melee" name="Melee" type="number" />
<label for="Melee2">Next Value</label>
<input id="Melee2" name="Melee2" type="number" />
</p>
<p>
<label for="Speed">Base-Movement Speed</label>
<input id="Speed" name="Speed" type="number" />
<label for="Speed2">Next Value</label>
<input id="Speed2" name="Speed2" type="number" />
</p>
<p>
<input type="submit" value="CALCULATE MAX STATS" />
or
<input type="reset" value="Reset" />
</p>
<p>
<label for="stat">Health</label>
<input id="stat" name="stat" type="number" />
</p>
<p>
<label for="stat2">Stamina</label>
<input id="stat2" name="stat2" type="number" />
</p>
<p>
<label for="stat3">Oxygen</label>
<input id="stat3" name="stat3" type="number" />
</p>
<p>
<label for="stat4">Food</label>
<input id="stat4" name="stat4" type="number" />
</p>
<p>
<label for="stat7">Weight</label>
<input id="stat7" name="stat7" type="number" />
</p>
<p>
<label for="stat5">Melee Damage</label>
<input id="stat5" name="stat5" type="number" />
</p>
<p>
<label for="stat6">Movement Speed</label>
<input id="stat6" name="stat6" type="number" />
</p>
</fieldset>
</form>
<script>
(function () {
function calculateStat(Health,Stamina,Oxygen,Food,Weight,Melee,Speed,Health2,Stamina2,Oxygen2,Food2,Weight2,Melee2,Speed2) {
Health = parseFloat(Health);
Health2 = parseFloat(Health2);
return (Health + Health2 * 250);
Stamina = parseFloat(Stamina);
Stamina2 = parseFloat(Stamina2);
return (Stamina + Stamina2 * 250);
Oxygen = parseFloat(Oxygen);
Oxygen2 = parseFloat(Oxygen2);
return (Oxygen + Oxygen2 * 250);
Food = parseFloat(Food);
Food2 = parseFloat(Food2);
return (Food + Food2 * 250);
Weight = parseFloat(Weight);
Weight2 = parseFloat(Weight2);
return (Weight + Weight2 * 250);
Melee = parseFloat(Melee);
Melee2 = parseFloat(Melee2);
return (Melee + Melee2 * 250);
Speed = parseFloat(Speed);
Speed2 = parseFloat(Speed2);
return (Speed + Speed2 * 250);
}
var stat = document.getElementById("stat");
if (stat) {
stat.onsubmit = function () {
this.stat.value = calculateStat(this.Health.value, this.Health2.value);
this.stat2.value = calculateStat(this.Stamina.value, this.Stamina2.value);
this.stat3.value = calculateStat(this.Oxygen.value, this.Oxygen2.value);
this.stat4.value = calculateStat(this.Food.value, this.Food2.value);
this.stat5.value = calculateStat(this.Melee.value, this.Melee2.value);
this.stat6.value = calculateStat(this.Speed.value, this.Speed2.value);
this.stat7.value = calculateStat(this.Weight.value, this.Weight2.value);
return false;
};
}
}());
</script>
</body>
</html>
Your function is completely off, you have multiple returns statements (which is fine except your function will complete executing after it encounters the first one) and it takes 14 argument but you are only passing the first 2 when you call it. I would start with fixing this first. An interesting side effect of how JavaScript handles function arguments means your misuse is hiding the problems with your function. This function sould fit your needs:
function calculateStat(a, b) {
return (parseFloat(a) + parseFloat(b) * 250);
}
Now as for the order of operations, JavaScript interprets this equation as a + (b * 250) (2 + 3 * 4 == 14) and not as (a + b) * 250 ((2 + 6) * 4 == 20), so if this is what you are looking for just change it to this: (parseFloat(a) + parseFloat(b)) * 250
Related
I need to to enter a new value( the standard manufacturing thickness(SMT)) and divid it on /48 then check if the answer < 135 display (pass) if not display (Enter higher value) I tried if else statement but it doesn't work
and also I want to display the (the standard manufacturing thickness(SMT=)) text input side by side with the MAOP(psi)= text input.
<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>
<h2>Enter inputs</h2>
<label for="P">MAOP(psi)=</label>
<input type="number" id="P">
<br>
<label for="D=">Do(in)=</label>
<input type="number" id="D">
<br>
<label for="SMYS">SMYS(psi)=</label>
<input type="number" id="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF">
<br>
<label for="T">T=</label>
<input type="number" id="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E">
<br>
<button type="submit" id="calculate">calculate</button>
<br>
<label for="total">Wall Thickness(in)=</label>
<input type="number" id="total" readonly>
<br>
<label for="SMT">Standerd Manufacturing Thickness (in)=</label>
<input type="number" id="SMT">
<br>
<button type="submit" id="check">Check</button>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var P = +document.getElementById("P").value;
var D = +document.getElementById("D").value;
var SMYS = +document.getElementById("SMYS").value;
var DF = +document.getElementById("DF").value;
var T = +document.getElementById("T").value;
var E = +document.getElementById("E").value;
var SMT = +document.getElementById("SMT").value;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
var Check= (SMT / 48);
function myFunction() {
document.getElementById("Check").value = Check;
}
if (SMT / 48 < 135) {
console.log("pass");
} else {
console.log("enter higher value");
}
});
</script>
</body>
I am doing a simple online form to calculate BMR using Harris–Benedict equation with the imperial measurements. I don't know where the error is inside my code but right now only the Clear the form button works. I didn't post the entire HTML code for the webpage because it looks just like I want it and it's only the calculation that I am having the problem with.
<form>
<fieldset id="ImpCalcInfo">
<label for="ageinput">
Age
<input tabindex="1" type="text" id="ageinput" name="age" />
</label>
<label for="heightinput">
Height
<input tabindex="3" type="text" id="heightinput" name="heigh" />
</label>
<label for="weightinput">
Weight
<input tabindex="5" type="text" id="weightinput" name="weight" />
</label>
<label for="genderinput">
<input name="gender" tabindex="7" type="radio" id="maleinput" value="1" checked>Male
<input name="gender" tabindex="9" type="radio" id="femaleinput" value="0">Female
</label>
</fieldset>
<input tabindex="11" type="button" id="submit" value="Submit" />
<input tabindex="13" type="reset" value="Clear fields" />
</form>
function impCalc() {
var bmrIm = 0;
var ageIm = document.getElementById("ageinput").value;
var heightIm = document.getElementById("heightinput").value;
var weightIm = document.getElementById("weightinput").value;
var genderIm = document.getElementById("gender").value;
if (genderIm.value = "1") {
bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
}
else {
bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
}
(ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");
}
document.getElementById("button").addEventListener("submit", impCalc, false);
The radio button were not working because you were taking them as an ID but the id does not exist in the input. You have get them via getElementsByName()[0]
Also you event listener did not know where button is clicked so the button id is is unique and it will listen to that click only when you click submit.
Here is working demo: https://jsfiddle.net/usmanmunir/tjsnaz4w/10/
function impCalc() {
var bmrIm = 0;
var ageIm = document.getElementById("ageinput").value;
var heightIm = document.getElementById("heightinput").value;
var weightIm = document.getElementById("weightinput").value;
var genderIm = document.getElementsByName("gender")[0].value
if (genderIm.value == "1") {
bmrIm = 66 + (6.2 * weightIm) + (12.7 * heightIm) - (6.76 * ageIm);
}
else {
bmrIm = 655 + (4.35 * weightIm) + (4.7 * heightIm) - (4.7 * ageIm);
}
(ageIm && heightIm && weightIm) ? alert("Your BMR is: " + bmrIm) : alert("Please fill in all fields");
}
var el = document.getElementById('submit');
el.addEventListener("click", impCalc, false);
HTML
<form>
<fieldset id="ImpCalcInfo">
<label for="ageinput">
Age
<input tabindex="1" type="text" id="ageinput" name="age" />
</label>
<label for="heightinput">
Height
<input tabindex="3" type="text" id="heightinput" name="heigh" />
</label>
<label for="weightinput">
Weight
<input tabindex="5" type="text" id="weightinput" name="weight" />
</label>
<label for="genderinput">
<input name="gender" tabindex="7" type="radio" id="gender" value="1" checked>Male
<input name="gender" tabindex="9" type="radio" id="gender" value="0">Female
</label>
</fieldset>
<input tabindex="11" type="button" id="submit" value="Submit" />
<input tabindex="13" type="reset" value="Clear fields" />
</form>
Hope this helps.
I'm trouble when I click the Calculate button it doesn't show anything in field of the result. How can I solve this problem?
window.onload = function toBmr() {
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var result = document.getElementById('result');
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', toCalculate);
function toCalculate() {
if(gender.value && weight.value && height.value && age.value) {
if(gender.value === 1) {
result.value = 66.47 + (13.7 * weight.value) + (5.003 * height.value) - (6.755 * age.value);
return result.toFixed(2);
}
if(gender.value === 2) {
result.value = 655.1 + (9.563 * weight.value) + (1.85 * height.value) - (4.676 * age.value);
return result.toFixed(2);
}
}
if(!gender.value || !weight.value || !height.value || !age.value) {
result.value = " ";
}
};
};
<form name="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6" onkeyup="fieldCheck"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6" onkeyup="fieldCheck"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3" onkeyup="fieldCheck"></p>
<input type="submit" id="calculate" value="Calculate" alt="calculate" onclick="toCalculate()">
<input type="submit" id="clear" value="Clear" alt="clear"><br><br>
<label>BMR = <input id="result" type="text" name="result" size="15" maxlength="10" /> calories/day</label>
</form>
Any help will be awesome! Thanks!
You need to use button instead of <input type="submit> in your form so that the page does not refresh.
Your gender radio values are male and female and you are checking if they are 1 and 2 in your script.
result.toFixed is not a function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="index.js"></script>
</head>
<body>
<form name="do-form">
<p>BMR Calculator</p>
<p>Gender:
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
</p>
<p>Weight: <input type="number" name="weight" id="weight" size="10" maxlength="6"> kg</p>
<p>Height: <input type="number" name="height" id="height" size="10" maxlength="6"> cm</p>
<p>Age: <input type="number" name="age" id="age" size="10" maxlength="3"></p>
<button type="button" id="calculate">Calculate</button>
<button type="button" id="clear" alt="clear">Clear</button><br><br>
<label>BMR = <input id="result" type="text" name="result" size="15" maxlength="10" /> calories/day</label>
</body>
</html>
window.onload = function toBmr() {
var gender = document.getElementById('gender');
var weight = document.getElementById('weight');
var height = document.getElementById('height');
var age = document.getElementById('age');
var result = document.getElementById('result');
var calculate = document.getElementById('calculate');
calculate.addEventListener('click', toCalculate);
function toCalculate() {
if(gender.value && weight.value && height.value && age.value) {
if(gender.value == 'male') {
result.value = 66.47 + (13.7 * weight.value) + (5.003 * height.value) - (6.755 * age.value);
}
if(gender.value == 'female') {
result.value = 655.1 + (9.563 * weight.value) + (1.85 * height.value) - (4.676 * age.value);
}
}
if(!gender.value || !weight.value || !height.value || !age.value) {
result.value = " ";
}
};
};
We have a form and need to iterate over some elements to get the final sum to put in a "total" element.
E.g., here is a working starter script. It doesn't NOT iterate over the other ones. It does NOT consider the elements "item*", below, yet but should. Keep reading.
<script>
$( document ).ready(function() {
$('#taxsptotal').keyup(calcgrand);
$('#shiptotal').keyup(calcgrand);
$('#disctotal').keyup(calcgrand);
function calcgrand() {
var grandtot = parseFloat($('#subtotal').val(), 10)
+ parseFloat($("#taxsptotal").val(), 10)
+ parseFloat($("#shiptotal").val(), 10)
- parseFloat($("#disctotal").val(), 10)
$('#ordertotal').val(grandtot);
}
});
</script>
We are adding more to this. Think of having many items in a cart and each one has the same elements for the following where "i" is a number designating an individual item.
<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">
<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">
<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">
<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />
<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />
<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />
(1) User can change any itemprice[i] and/or itemquantity[i], so each needs a keyup. I can do that in php as it iterates over the items.
(2) These elements will have a $('.itemtotal[i]').keyup(calcgrand); (Or function other than calcgrand, if needed) statement, too. That keyup can be added by the php code as it evaluates the items in the cart.
(3) When an element is changed, then the script should automatically (a) calculate the $('[name="itemtotal[i]"]').val() and (b) replace the value for $('[name="itemtotal[i]"]').val().
(4) Then, the script above will use the $('[name="itemtotal[i]"]').val() to (a) replace the #subtotal value and (b) use that value in the equation.
Can someone help me with this? I am stuck on how to iterate over the [i] elements.
p.s. Any corrections/enhancements to the above code is appreciated, too.
Add a custom class to the desired inputs to sum:
HTML:
<input type="text" class="customclass" name=itemtotal[1] value="8.97" />
<input type="text" class="customclass" name=itemquantity[1] value="3" />
<input type="text" class="customclass" name=itemprice[1] value="2.99" />
JS:
var sum = 0;
$.each('.customclass',function(i, item){
sum = sum + Number($(this).val());
})
alert(sum);
if you for example group your inputs by giving them a class, or have each group in a div like so:
<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">
<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">
<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">
<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<div class="group">
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />
</div>
<div class="group">
<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />
</div>
<div class="group">
<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />
</div>
Then you could do the following in javascript:
function calcSubTotal() {
$('[name^="itemtotal"]').each(function(i){
var sum = 0;
$('[name^="itemtotal"]').each(function(i){
sum += $(this).val();
});
$('#subtotal').val(sum);
});
}
$('.group').each(function(i) {
var total = $(this).find('[name^="itemtotal"]');
var qnt = $(this).find('[name^="itemquantity"]');
var price = $(this).find('[name^="itemprice"]');
total.keyup(function(e){
price.val(total.val() * qnt.val());
calcSubTotal();
});
qnt.keyup(function(e){
price.val(total.val() * qnt.val());
calcSubTotal();
});
});
$("[name^='itemprice'], [name^='itemquantity']").keyup(function(){
var input_name = $(this).attr('name');
var temp_name_split = input_name.split(/[\[\]]+/);
var temp_total = parseInt($('[name="itemquantity['+temp_name_split[1] +']"]').val()) * parseFloat($('[name="itemprice['+temp_name_split[1] +']"]').val());
$('[name="itemtotal['+temp_name_split[1]+']"]').val(temp_total.toFixed(2));
var total = 0;
$("[name^='itemtotal']").each(function() {
total += parseFloat($(this).val());
});
$('#subtotal').val(total.toFixed(2));
});
So basically, I am creating an application form for gym membership.
The base cost is $100. If juggling is selected, the cost will increase by $50.
Also, the base cost will increase by $50 if the 'BMI' is > 25 and <= 30. If the 'BMI' is > 30, it will increase by $100 instead.
This is my code. It is not working as intended. Would like some help. Thanks a lot.
<!DOCTYPE html>
<html>
<head>
<title>UWS application form</title>
<link rel="stylesheet" href="Prac1Task2.css" />
</head>
<body>
<form>
<fieldset>
<legend>Fitness Details</legend>
Favourite Activities: <br/>
<input type="checkbox" name="activity" value="cycling" id="cycling"><label for="cycling">Cycling</label>
<input type="checkbox" name="activity" value="50" id="juggling" onchange="update(this);"><label for="juggling">Juggling</label>
<br/>
<br/>
<label for="height">What is your height (Meters)</label><br/>
<input type="number" name="height" id="height" class="input" onchange="getBMI()">
<br/>
<label for="weight">What is your weight? (kg)</label><br/>
<input type="number" name="weight" id="weight" class="input" onchange="getBMI()">
<br/>
<label for="bmi">BMI:</label><br/>
<input type="number" name="bmi" id="bmi" class="input" value="" readonly>
<script>
function getBMI()
{
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
document.getElementById("bmi").value = (weight / height) / height;
var bmi = document.getElementById("bmi");
var price = document.getElementById("price").value;
if (bmi.value > 25 && bmi.value <= 30)
{
parseInt(price.value) += parseInt(50);
document.getElementById('price').value = price.value;
}
else if (bmi.value > 30)
{
document.getElementById("price").value = document.getElementById("price").value + 100;
}
}
</script>
</fieldset>
<br/>
<fieldset>
<legend>Application Details</legend>
Date of Application:<br/>
<input class="input" id="date" name="date" readonly />
<script>
var timetime = new Date();
document.getElementById("date").value = (timetime.getDate() + "/" + (timetime.getMonth() + 1)
+ "/" + timetime.getFullYear());
</script>
<br/><br/>
Cost of Application: <br/>
$<input type="number" class="input" id="price" name="price" step="0.01" value="100" readonly />
<script>
var total = 100;
function update(feature) {
if(feature.checked == true){
total += parseInt(feature.value);
document.getElementById('price').value = total;
}
if(feature.checked == false){
total -= parseInt(feature.value);
document.getElementById('price').value = total;
}
}
</script>
</fieldset>
<br/>
<input type="submit" value="Submit" class="button">
</form>
</body>
</html>
You haven't mentioned the exact issue which you are facing. However, I think there should be some problem with this line of code.
parseInt(price.value) += parseInt(50);
parseInt() is a function and you cannot assign values to it.
It should be some thing like this
price.value = parseInt(price.value) + parseInt(50);
Also price.value is not a proper reference because you are assigning document.getElementById("price").value; to it. So you should be using price instead of price.value