JS计算完成后，下次显示NAN值

Question

我已经完成了这个 JavaScript 计算。 Live Preview

一切正常，但问题是，一旦计算完成，下一次它会显示 NAN 值。如果你不重新加载页面，那么你就无法计算！ 我想重复计算而不重新加载，怎么可能？

这是我的简单计算：

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

Answer 1

你得到 NaN 因为你用它的 value 替换了对元素的引用，所以第二次它不再是元素。

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

所以下次你调用它时

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

所以你需要在里面重命名你的变量...

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;

Answer 2

你应该在你的函数中声明你的变量或者你可以得到函数中每个字段的值这样当代码下次运行时它会得到值再次正确，

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