CODEWITHSUNDEEP
javascripthtmlcalculator
Mehedi Hasan
Mehedi Hasan

Reputation: 59

Once the JS calculation is done, the next time it shows NAN value

I've done this JavaScript calculation. Live Preview

Everything is okay but the problem is, Once the calculation is done, the next time it shows NAN value. If you do not reload the page, then you can not calculation! I want to repeat the calculation without reloading, how could it be?

Here Is my Simple Calculation: 

// get all data 
var first = document.getElementById('first');
var second = document.getElementById('second');
var third = document.getElementById('third');
var four = document.getElementById('four');
var five = document.getElementById('five');
var six = document.getElementById('six');
var seven = document.getElementById('seven');
var eight = document.getElementById('eight');
var outPut = document.getElementById('result');

// Listen for Submit the form
document.getElementById('gpaInput').addEventListener('submit', outPutF);

function outPutF(e){
	e.preventDefault();
	// Calculation
	first = first.value * 5 / 100;
	second = second.value * 5 / 100;
	third = third.value * 5 / 100;
	four = four.value * 15 / 100;
	five = five.value * 15 / 100;
	six = six.value * 20 / 100;
	seven = seven.value * 25 / 100;
	eight = eight.value * 10 / 100;

	var result = first + second + third + four + five + six + seven + eight;

	// Reset the form
	this.reset();

	// Finally output the Calculation
	outPut.innerHTML = 'Your CGPA: '+result;
	// setTimeout(window.location.reload(true), 9000);
}
input:focus, button:focus, select:focus {outline: none!important;box-shadow: none!important;}
#gpaInput .input-group {margin: 0.5em 0;}	
#gpaInput .input-group-text {	min-width: 95px;}
#result {display: block;	width: 68%;	text-align: center;	margin-top: 25px;	padding: 17px 0;}
.jumbotron {overflow: hidden;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row justify-content-center">
		<div class="col-lg-6">
			<form id="gpaInput">
				<div class="input-group">
					<input id="first" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="second" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="third" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="four" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="five" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="six" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="seven" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="eight" type="number" step="any" class="form-control">
				</div>
				<hr>
				<div class="mt-4">
					<button type="submit" class="btn btn-info float-left p-3">Calculate CGPA</button>
					<h5 id="result" class="alert alert-success float-right mt-0">Complete The form!</h5>
				</div>
			</form>
		</div>
	</div>
</div>

Upvotes: 0

Views: 98

Answers (2)

Sathish Sundar
Sathish Sundar

Reputation: 194

You Should Declare your variables inside your function or you can get the value of every fields inside the function so that when the code runs for the next time it will get the values again correctly,

// Listen for Submit the form
document.getElementById('gpaInput').addEventListener('submit', outPutF);

function outPutF(e){
	var first = document.getElementById('first');
	var second = document.getElementById('second');
	var third = document.getElementById('third');
	var four = document.getElementById('four');
	var five = document.getElementById('five');
	var six = document.getElementById('six');
	var seven = document.getElementById('seven');
	var eight = document.getElementById('eight');
	var outPut = document.getElementById('result');
	
	e.preventDefault();
	// Calculation
	first = first.value * 5 / 100;
	second = second.value * 5 / 100;
	third = third.value * 5 / 100;
	four = four.value * 15 / 100;
	five = five.value * 15 / 100;
	six = six.value * 20 / 100;
	seven = seven.value * 25 / 100;
	eight = eight.value * 10 / 100;

	var result = first + second + third + four + five + six + seven + eight;

	// Reset the form
	this.reset();

	// Finally output the Calculation
	outPut.innerHTML = 'Your CGPA: '+result;
	// setTimeout(window.location.reload(true), 9000);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row justify-content-center">
		<div class="col-lg-6">
			<form id="gpaInput">
				<div class="input-group">
					<input id="first" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="second" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="third" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="four" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="five" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="six" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="seven" type="number" step="any" class="form-control">
				</div>
				<div class="input-group">
					<input id="eight" type="number" step="any" class="form-control">
				</div>
				<hr>
				<div class="mt-4">
					<button type="submit" class="btn btn-info float-left p-3">Calculate CGPA</button>
					<h5 id="result" class="alert alert-success float-right mt-0">Complete The form!</h5>
				</div>
			</form>
		</div>
	</div>
</div>

Upvotes: 1

epascarello
epascarello

Reputation: 207527

You get NaN because you are replacing the reference to the element with its value , so on the second time it is not longer the element. 

var first = document.getElementById('first');  //<-- element
first = first.value * 5 / 100;  //<-- first replaced with a number

so than next time you call it

first = first.value * 5 / 100;  //<-- first.value is undefined here since first is a number

So you need to rename your variables inside...

var nFirst = first.value * 5 / 100;
var nSecond = second.value * 5 / 100;
var nThird = third.value * 5 / 100;
var nFour = four.value * 15 / 100;
var nFive = five.value * 15 / 100;
var nSix = six.value * 20 / 100;
var nSeven = seven.value * 25 / 100;
var nEight = eight.value * 10 / 100;

var result = nFirst + nSecond + nThird + nFour + nFive + nSix + nSeven + nEight;

Upvotes: 3

Related Questions