NaN error on form submission [duplicate] - javascript

This question already has answers here:
Reading numbers from inputs with JavaScript always returns NaN
(8 answers)
Closed 7 years ago.
I'm attempting to write a simple JavaScript program that calculates the cost of gas based on some parameters from a form. Upon form submission, I get a NaN error inside of the "calculatedMonthlyCost" div.
Can anybody tell me what I'm doing wrong? Is there a better way of doing this?
<form>
Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
<br>
Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
<br>
How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
<br>
<input type="submit" value="Submit">
<br>
</form>
<div id="calculatedMonthlyCost"></div>
<script>
var calcCost = function (costOfGas, vehicleMPG, numMiles) {
var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
var weeklyCost = dailyCost * 5;
var monthlyCost = weeklyCost * 4;
return {
dailyCost: dailyCost,
weeklyCost: weeklyCost,
monthlyCost: monthlyCost
};
}
var userCostOfGas = document.forms[0].costOfGas.value;
var userMPG = document.forms[0].vehicleMPG.value;
var userNumMiles = document.forms[0].numMiles.value;
document.forms[0].onsubmit = function(e) {
e.preventDefault();
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};
</script>

You were getting the values on page load (when they were empty). You just need to get the values inside the onsubmit event listener, and to convert them to Numbers.
var calcCost = function (costOfGas, vehicleMPG, numMiles) {
var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
var weeklyCost = dailyCost * 5;
var monthlyCost = weeklyCost * 4;
return {
dailyCost: dailyCost,
weeklyCost: weeklyCost,
monthlyCost: monthlyCost
};
}
document.forms[0].onsubmit = function(e) {
e.preventDefault();
var userCostOfGas = +document.forms[0].costOfGas.value; // < Move these lines here and
var userMPG = +document.forms[0].vehicleMPG.value; // < add a plus sign before them
var userNumMiles = +document.forms[0].numMiles.value; // <
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};
<form>
Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
<br>
Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
<br>
How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
<br>
<input type="submit" value="Submit">
<br>
</form>
<div id="calculatedMonthlyCost"></div>
If you only want 2 decimals, you can change this line:
calculatedMonthlyCost.innerHTML = (costs.weeklyCost).toFixed(2);
Demo:
var calcCost = function (costOfGas, vehicleMPG, numMiles) {
var dailyCost = (costOfGas / vehicleMPG) * (numMiles * 2);
var weeklyCost = dailyCost * 5;
var monthlyCost = weeklyCost * 4;
return {
dailyCost: dailyCost,
weeklyCost: weeklyCost,
monthlyCost: monthlyCost
};
}
document.forms[0].onsubmit = function(e) {
e.preventDefault();
var userCostOfGas = +document.forms[0].costOfGas.value; // < Move these lines here and
var userMPG = +document.forms[0].vehicleMPG.value; // < add a plus sign before them
var userNumMiles = +document.forms[0].numMiles.value; // <
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = (costs.weeklyCost).toFixed(2);
};
<form>
Cost of Gas: <input type="text" placeholder="ex: 3.10" name="costOfGas"/>
<br>
Vehicle MPG: <input type="text" placeholder="ex: 30" name="vehicleMPG"/>
<br>
How many miles do you drive to work (one-way): <input type="text" placeholder="ex: 10" name="numMiles"/>
<br>
<input type="submit" value="Submit">
<br>
</form>
<div id="calculatedMonthlyCost"></div>

You save the value of your inputs before the onsubmit method is called. This actually saves a blank value since the variables are set before the user inputs a value and it's not dynamic. The values need to be checked on submit.
document.forms[0].onsubmit = function(e) {
var userCostOfGas = parseInt(document.forms[0].costOfGas.value,10);
var userMPG = parseInt(document.forms[0].vehicleMPG.value,10);
var userNumMiles = parseInt(document.forms[0].numMiles.value,10);
e.preventDefault();
var costs = calcCost(userCostOfGas, userMPG, userNumMiles);
var calculatedMonthlyCost = document.getElementById("calculatedMonthlyCost");
calculatedMonthlyCost.innerHTML = costs.weeklyCost;
};

Related

Herons formula in javascript and html

I have to find the areas of a triangle using Heron's formula. I wrote this code but it is not calculating the area correctly.
For example I input sideA= 5, sideB= 4, sideC= 3 and the answer is supposed to be 6 but instead I get 72088
Can anybody help me fix this and explain why its happening?
function Triangle(sideA, sideB, sideC) {
this.sideA = sideA;
this.sideB = sideB;
this.sideC = sideC;
this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);
this.area = function() {
return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
}
}
function calculate() {
var sideA = document.getElementById('sideA').value;
var sideB = document.getElementById('sideB').value;
var sideC = document.getElementById('sideC').value;
var myTriangle = new Triangle(sideA, sideB, sideC);
document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}
<p>
Enter length of side a <input type='text' id="sideA" />
<br>
<br> Enter length of side b <input type='text' id="sideB" />
<br>
<br> Enter length of side c <input type='text' id="sideC" />
<div id="results"></div>
<button type="button" onclick="calculate()">Calculate</button>
The problem that you are having is the sideA, B and C variables are all of type STRINGs and not anything numeric. There are a few different solutions, in my answer I chose to use parseFloat to allow you to have decimal points as input as well as whole numbers.
function Triangle(sideA, sideB, sideC) {
this.sideA = parseFloat(sideA);
this.sideB = parseFloat(sideB);
this.sideC = parseFloat(sideC);
this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);
this.area = function() {
return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
}
}
function calculate() {
var sideA = document.getElementById('sideA').value;
var sideB = document.getElementById('sideB').value;
var sideC = document.getElementById('sideC').value;
var myTriangle = new Triangle(sideA, sideB, sideC);
document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}
<p>
Enter length of side a <input type='text' id="sideA" />
<br>
<br> Enter length of side b <input type='text' id="sideB" />
<br>
<br> Enter length of side c <input type='text' id="sideC" />
<div id="results"></div>
<button type="button" onclick="calculate()">Calculate</button>

trying to pull a calculation if a radio button is pressed

What i am trying to do now is have separate calculation when a radio button is highlighted for particular fields... in this case if the radio button is highlightedior "yearly" i want the user input of the text field to be calculated maintFees * 1 = x variable and show that output in maintTimesTwelve.
if not highlighted for "yearly" i want it to be calculated by maintFees * 12. and shown in maintTimesTwelve.
js fiddle:https://jsfiddle.net/ryx4qt0d/
here is the copy of my code
// start of variables
function yearlyPayment(){
var monthlyPayment = parseInt(document.getElementById("monthlyPayment").value);
var maintFees = parseInt(document.getElementById("maintFees").value);
var memFees = parseInt(document.getElementById("memFees").value);
var exchFees = parseInt(document.getElementById("exchFees").value);
var result = (monthlyPayment?monthlyPayment:0) + (maintFees?maintFees:0) + (memFees?memFees:0) + (exchFees?exchFees:0);
document.getElementById("txtResult").value = result;}
//first function after submission
function mpTwelve(){
var monPay = parseInt(document.getElementById("monthlyPayment").value);
var monTwe = monPay * 12;
document.getElementById("mpTimesTwelve").value = monTwe;}
// sencond function
function maintTwelve(){
var maintPay = parseInt(document.getElementById("maintFees").value);
var maintTwe = maintPay * 12;
var x = maintPay * 1;
if (document.getElementByClass("year").checked){
document.getElementById("mantTimesTwelve").value = x;
}
else{
document.getElementById("maintTimesTwelve").value = maintTwe;}
}
// third function
function yearlyTen(){
var yearPay = parseInt(document.getElementById("txtResult").value);
var yearTen = yearPay * 120;
document.getElementById("totalYearly").value = yearTen;}
//4th function
function yearlyTenMaint(){
var tenMain = parseInt(document.getElementById("maintTimesTwelve").value);
var tenMainTen = (tenMain * 120) * .5;
document.getElementById("maintTenYear").value = tenMainTen;}
//fifth function
function totalMeEx(){
var meEx = parseInt(document.getElementById("memFees").value);
var exMe = parseInt(document.getElementById("exchFees").value);
var totalExMe = (meEx + exMe) * 120;
document.getElementById("totalMemDues").value = totalExMe;
}
<div>
<p>
Monthly payment:<br>
<input type="text" id="monthlyPayment" class="input"/><br>
Maintenance fees:<br>
<input style="margin-left: 79px" type="text" id="maintFees" class="input"/>
<input type="radio" id="year" name="year" class="year">
<label for="year"> Yearly </label><br>
Membership dues:<br><br>
<input type="text" id="memFees" class="input"/><br>
xchange Fees<br>
<input type="text" id="exchFees" class="input"/><br>
<br>
Annual timeshare vacation cost:<br>
<input type="text" id="txtResult"/><br>
Monthly payment x 12<br>
<input type="text" id="mpTimesTwelve"/><br>
Maintenance fees x 12<br>
<input type="text" id="maintTimesTwelve"/><br>
Total yearly payment x10 years:<br>
<input type="text" id="totalYearly"/><br>
Yearly Mainteneance over 10 years w/ 5% increase:<br>
<input type="text" id="maintTenYear"/><br>
Membership Dues + Exchange Fees x 10 years:<br>
<input type="text" id="totalMemDues"/><br>
<button onclick="yearlyPayment(); mpTwelve(); maintTwelve();yearlyTen(); yearlyTenMaint();totalMeEx();">calculate</button><br>
</p></div>
if (document.getElementByClass("year").checked){ should be if (document.getElementsByClassName("year")[0].checked){ because getElementsByClassName() returns a collection. Can be simplified by using if (document.querySelector(".year").checked){
You had a typo here: document.getElementById("mantTimesTwelve") mant should be maint
Please: Check the console everytime a script doesn't run, it's so easy to find this kind of errors.
// start of variables
function yearlyPayment(){
var monthlyPayment = parseInt(document.getElementById("monthlyPayment").value);
var maintFees = parseInt(document.getElementById("maintFees").value);
var memFees = parseInt(document.getElementById("memFees").value);
var exchFees = parseInt(document.getElementById("exchFees").value);
var result = (monthlyPayment?monthlyPayment:0) + (maintFees?maintFees:0) + (memFees?memFees:0) + (exchFees?exchFees:0);
document.getElementById("txtResult").value = result;}
//first function after submission
function mpTwelve(){
var monPay = parseInt(document.getElementById("monthlyPayment").value);
var monTwe = monPay * 12;
document.getElementById("mpTimesTwelve").value = monTwe;}
// sencond function
function maintTwelve(){
var maintPay = parseInt(document.getElementById("maintFees").value);
var maintTwe = maintPay * 12;
var x = maintPay * 1;
if (document.getElementsByClassName("year")[0].checked){
document.getElementById("maintTimesTwelve").value = x;
}
else{
document.getElementById("maintTimesTwelve").value = maintTwe;
}
}
// third function
function yearlyTen(){
var yearPay = parseInt(document.getElementById("txtResult").value);
var yearTen = yearPay * 120;
document.getElementById("totalYearly").value = yearTen;}
//4th function
function yearlyTenMaint(){
var tenMain = parseInt(document.getElementById("maintTimesTwelve").value);
var tenMainTen = (tenMain * 120) * .5;
document.getElementById("maintTenYear").value = tenMainTen;}
//fifth function
function totalMeEx(){
var meEx = parseInt(document.getElementById("memFees").value);
var exMe = parseInt(document.getElementById("exchFees").value);
var totalExMe = (meEx + exMe) * 120;
document.getElementById("totalMemDues").value = totalExMe;
}
<div>
<p>
Monthly payment:<br>
<input type="text" id="monthlyPayment" class="input"/><br>
Maintenance fees:<br>
<input style="margin-left: 79px" type="text" id="maintFees" class="input"/>
<input type="radio" id="year" name="year" class="year">
<label for="year"> Yearly </label><br>
Membership dues:<br><br>
<input type="text" id="memFees" class="input"/><br>
xchange Fees<br>
<input type="text" id="exchFees" class="input"/><br>
<br>
Annual timeshare vacation cost:<br>
<input type="text" id="txtResult"/><br>
Monthly payment x 12<br>
<input type="text" id="mpTimesTwelve"/><br>
Maintenance fees x 12<br>
<input type="text" id="maintTimesTwelve"/><br>
Total yearly payment x10 years:<br>
<input type="text" id="totalYearly"/><br>
Yearly Mainteneance over 10 years w/ 5% increase:<br>
<input type="text" id="maintTenYear"/><br>
Membership Dues + Exchange Fees x 10 years:<br>
<input type="text" id="totalMemDues"/><br>
<button onclick="yearlyPayment(); mpTwelve(); maintTwelve();yearlyTen(); yearlyTenMaint();totalMeEx();">calculate</button><br>
</p></div>

How to calculating time difference

I'm trying to make a program where i put in to different times and get the difference in minute after clicking the "calculate" button. I'm not sure if my approach is correct, there may be some typo's.
I'v tried to make the different input values to number but it seems like there is another underlying problem which I can't see.
var hour1=document.getElementById("hour1");
var min1=document.getElementById("min1");
var hour2=document.getElementById("hour2");
var min2=document.getElementById("min2");
function calc(){
var minutt1=Number(hour1)*60+Number(min1);
var minutt2=Number(hour2)*60+Number(min2);
var resultat=0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML="Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min1">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
I expect getting a number which represents the time difference in minutes, but the actual output is "NaN".
You need to get the value of hour1, min1, hour2, and min2. You also don't have an element min2:
var hour1=document.getElementById("hour1").value;
var min1=document.getElementById("min1").value;
var hour2=document.getElementById("hour2").value;
var min2=document.getElementById("min2").value;
What your code was trying to do was multiply and subtract HTML elements (never a good idea).
var hour1 = document.getElementById("hour1").value;
var min1 = document.getElementById("min1").value;
var hour2 = document.getElementById("hour2").value;
var min2 = document.getElementById("min2").value;
function calc() {
var minutt1 = Number(hour1) * 60 + Number(min1);
var minutt2 = Number(hour2) * 60 + Number(min2);
var resultat = 0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML = "Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
Other answers are close, but you need to get the value of the inputs after you click the button
var hour1 = document.getElementById("hour1");
var min1 = document.getElementById("min1");
var hour2 = document.getElementById("hour2");
var min2 = document.getElementById("min2");
window.calc = function () {
var minutt1 = parseInt(hour1.value) * 60 + parseInt(min1.value);
var minutt2 = parseInt(hour2.value) * 60 + parseInt(min2.value);
var resultat = minutt1 - minutt2;
document.getElementById("result").innerHTML = "Time differance is:" + resultat;
console.log({minutt1:minutt1,minutt2:minutt2,resultat:resultat,
hour1:hour1,min1:min1,
hour2:hour2,min2:min2
})
};
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>

Why is my form outputting NaN?

So I have this form that is performing very basic calculations and when I submit it, it results to NaN.
The thing that is confusing me is when I do a typeof of one of the variables assigned to the value of each input, it returns "number", and yet I get NaN as a result. Can anyone tell me why or what it is I am doing wrong?
Here's my HTML:
<form name="baddiesCost">
<input type="number" placeholder="Total Caught" name="goomba" id="goomba-form">
<input type="number" placeholder="Total Caught" name="bobombs" id="bob-ombs-form">
<input type="number" placeholder="Total Caught" name="cheepCheeps" id="cheep-form">
<button id="submitForm">Submit</button>
</form>
<h1 id="total"></h1>
Here's my JavaScript:
document.baddiesCost.addEventListener("submit", function(e) {
e.preventDefault();
var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
var goombaCost = 5;
var bobombsCost = 7;
var cheepCost = 11;
var showTotal = document.getElementById("total");
var total = goombaCaught + bobombsCaught + cheepsCaught;
showTotal.textContent = cheepsCaught;
console.log(bobombsCaught);
console.log(typeof bobombsCaught);
})
This statement document.baddiesCost.bobombs.value * bobombsCost; uses variable bobombsCost which is not defined at this time.
So, it is similar to: document.baddiesCost.bobombs.value * undefined; which will be NaN.
To solve this put variable inicialization before usage like in following code:
document.baddiesCost.addEventListener("submit", function(e) {
e.preventDefault();
var goombaCost = 5;
var bobombsCost = 7;
var cheepCost = 11;
var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
var showTotal = document.getElementById("total");
var total = goombaCaught + bobombsCaught + cheepsCaught;
showTotal.textContent = cheepsCaught;
console.log(bobombsCaught);
console.log(typeof bobombsCaught);
})
Anyway, NaN is number type, you can refer to following post for more explaination.

Nn algorithm that divides a single number three times Javascript

I'm trying to create an algorithm that divides a single number three times.
I've created this code, but it for some reason it doesn't work and I've got no clue why.
Could some one give me insight into what i'm doing wrong?
HTML
<form id="frm1">
Budget: <input id="budget" type="text" name="budget" value="110"><br>
<br>
Domestic:
<input id="low" type="text" name="low" value="20">%<br>
<input id="lowresult" type="text" name="low" oninput="calculate()"><br>
Continental:
<input id="med" type="text" name="med" value="30">% <br>
<input id="medresult" type="text" name="med" oninput="calculate()"><br>
International:
<input id="high" type="text" name="high" value="50">% <br>
<input id="highresult" type="text" name="high" oninput="calculate()"><br>
<br>
</form>
Javascript
function calculate() {
var budget = document.getElementById("budget").value;
var low = document.getElementById('low').value;
var med = document.getElementById('med').value;
var high = document.getElementById('high').value;
var lowResult = document.getElementById('lowresult');
var medResult = document.getElementById('medresult');
var highResult = document.getElementById('highresult');
var lowFinalResult = (budget /100)*low;
lowResult.value = lowResult;
var medFinalResult = (budget /100)*med;
medResult.value = medResult;
var highFinalResult = (budget /100)*high;
highResult.value = highResult;
}
adjust javascript
this
var lowFinalResult = (budget /100)*low;
lowResult.value = lowFinalResult;
insetad of
var lowFinalResult = (budget /100)*low;
lowResult.value = lowResult;
full code
function calculate() {
var budget = document.getElementById("budget").value;
var low = document.getElementById('low').value;
var med = document.getElementById('med').value;
var high = document.getElementById('high').value;
var lowResult = document.getElementById('lowresult');
var medResult = document.getElementById('medresult');
var highResult = document.getElementById('highresult');
var lowFinalResult = (budget /100)*low;
lowResult.value = lowFinalResult;
var medFinalResult = (budget /100)*med;
medResult.value = medFinalResult;
var highFinalResult = (budget /100)*high;
highResult.value = highFinalResult;
}
You wrote in the comment that you're "trying to input one amount into the 'budget' input". So I'd like to add that you do that calculate() in the budget input:
<form id="frm1">
Budget: <input id="budget" type="text" name="budget"
value="110" oninput="calculate()"><br>
So the oninput attribute of the other inputs can be removed.

Categories