javascript - 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 是因为您正在用元素的值替换对元素的引用，因此第二次它不再是元素。

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;