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

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

我已经完成了这个 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>

你得到 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;

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

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