我已完成此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>
答案 0 :(得分：3)
你得到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;
答案 1 :(得分：0)
你应该在你的函数中声明你的变量或你可以获得函数内的每个字段的值，这样当代码运行下一次它会得到值再次正确，
// 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>