當我在Java Script中輸入第二個模塊時出現錯誤結果

Question

我使用jquery mobile創建GPA計算器，但輸入第二個模塊的值後我沒有得到正確的結果，例如當我插入第一個模塊的Credits作爲20和等級是「A」然後我按計算按鈕我得到了4.00這是很好的，但現在再次我插入20學分到第二個模塊和等級是「A」它不給我正確的結果它顯示結果0.08，它應該是4.00

這裏是我的代碼用腳本

$(document).ready(function(){ 
 
    $("#cal").click(function() { \t 
 
    var a = document.getElementById('name1').value 
 
    eval(a) 
 
    var b = $('#grade1 option:selected').val() 
 
    var c = document.getElementById('name2').value 
 
    eval(c) 
 
    var d = $('#grade2 option:selected').val() 
 
    var e = document.getElementById('name3').value 
 
    eval(e) 
 
    var f = $('#grade3 option:selected').val() 
 
    var g = document.getElementById('name4').value 
 
    eval(g) 
 
    var h = $('#grade4 option:selected').val() 
 
    var i = document.getElementById('name5').value 
 
    eval(i) 
 
    var j = $('#grade5 option:selected').val() 
 
    var m1 = a * b; 
 
    var m2 = c * d; 
 
    var m3 = e * f; 
 
    var m4 = g * h; 
 
    var m5 = i * j; 
 
    var total1 = m1 + m2 + m3 + m4 + m5; 
 
    var total2 = a + c + e + g + i; 
 
    var total3 = total1/total2 
 
    var total3 = total3.toFixed(2); 
 

 
    $('#res').val(total3); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-role="page"> 
 
    <div data-role="header" data-theme="f"> <a data-iconpos="notext" data-role="button" data-icon="home" title="Home">Home</a> 
 
    <h1>BENG GPA Calculator</h1> 
 
    <form id="form"> 
 
     <ul data-role="listview" data-inset="true"> 
 
     <li>Module 1</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name1">Credits:</label> 
 
      <input type="text" name="name1" id="name1" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade1" class="select">Grade:</label> 
 
      <select class="grade1" data-theme="f" id="grade1"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option 
 
       > 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 2</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name2">Credits:</label> 
 
      <input type="text" name="name2" id="name2" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade2" class="select">Grade:</label> 
 
      <select class="grade2" data-theme="f" id="grade2"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 3</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name3">Credits:</label> 
 
      <input type="text" name="name3" id="name3" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade3" class="select">Grade:</label> 
 
      <select class="grade3" data-theme="f" id="grade3"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 4</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name4">Credits:</label> 
 
      <input type="text" name="name4" id="name4" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade4" class="select">Grade:</label> 
 
      <select class="grade4" data-theme="f" id="grade4"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 5</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name5">Credits:</label> 
 
      <input type="text" name="name5" id="name5" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade5" class="select">Grade:</label> 
 
      <select class="grade5" data-theme="f" id="grade5"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="res">Result:</label> 
 
      <input type="text" name="res" id="res" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li class="ui-body ui-body-b"> 
 
      <fieldset class="ui-grid-a"> 
 
      <div> 
 
       <button type="button" id="cal" name="cal" data-theme="f">Calculate</button> 
 
      </div> 
 
      </fieldset> 
 
     </li> 
 
     <li class="ui-body ui-body-b"> 
 
      <fieldset class="ui-grid-a"> 
 
      <div> 
 
       <button type="reset" data-theme="d">Reset</button> 
 
      </div> 
 
      </fieldset> 
 
     </li> 
 
     </ul> 
 
    </form> 
 
    </div>

Answer 1

1. 通過parseFloat()將所有值轉換爲數字。
2. 使用0作爲默認值。
3. 刪除無用的eval()。

$(document).ready(function(){ 
 
    $("#cal").click(function() { \t 
 
    var a = parseFloat(document.getElementById('name1').value) || 0 
 
    var b = parseFloat($('#grade1 option:selected').val()) || 0 
 
    var c = parseFloat(document.getElementById('name2').value) || 0 
 
    var d = parseFloat($('#grade2 option:selected').val()) || 0 
 
    var e = parseFloat(document.getElementById('name3').value) || 0 
 
    var f = parseFloat($('#grade3 option:selected').val()) || 0 
 
    var g = parseFloat(document.getElementById('name4').value) || 0 
 
    var h = parseFloat($('#grade4 option:selected').val()) || 0 
 
    var i = parseFloat(document.getElementById('name5').value) || 0 
 
    var j = parseFloat($('#grade5 option:selected').val()) || 0 
 
    var m1 = a * b; 
 
    var m2 = c * d; 
 
    var m3 = e * f; 
 
    var m4 = g * h; 
 
    var m5 = i * j; 
 
    var total1 = m1 + m2 + m3 + m4 + m5; 
 
    var total2 = a + c + e + g + i; 
 
    var total3 = total1/total2 
 
    var total3 = total3.toFixed(2); 
 

 
    $('#res').val(total3); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-role="page"> 
 
    <div data-role="header" data-theme="f"> <a data-iconpos="notext" data-role="button" data-icon="home" title="Home">Home</a> 
 
    <h1>BENG GPA Calculator</h1> 
 
    <form id="form"> 
 
     <ul data-role="listview" data-inset="true"> 
 
     <li>Module 1</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name1">Credits:</label> 
 
      <input type="text" name="name1" id="name1" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade1" class="select">Grade:</label> 
 
      <select class="grade1" data-theme="f" id="grade1"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option 
 
       > 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 2</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name2">Credits:</label> 
 
      <input type="text" name="name2" id="name2" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade2" class="select">Grade:</label> 
 
      <select class="grade2" data-theme="f" id="grade2"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 3</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name3">Credits:</label> 
 
      <input type="text" name="name3" id="name3" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade3" class="select">Grade:</label> 
 
      <select class="grade3" data-theme="f" id="grade3"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 4</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name4">Credits:</label> 
 
      <input type="text" name="name4" id="name4" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade4" class="select">Grade:</label> 
 
      <select class="grade4" data-theme="f" id="grade4"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li>Module 5</li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="name5">Credits:</label> 
 
      <input type="text" name="name5" id="name5" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="grade5" class="select">Grade:</label> 
 
      <select class="grade5" data-theme="f" id="grade5"> 
 
      <option value="-1">—</option> 
 
      <option value="4">A</option> 
 
      <option value="3.7">A-</option> 
 
      <option value="3.3">B+</option> 
 
      <option value="3">B</option> 
 
      <option value="2.7">B-</option> 
 
      <option value="2.3">C+</option> 
 
      <option value="2">C</option> 
 
      <option value="1.7">C-</option> 
 
      <option value="1.3">D+</option> 
 
      <option value="1">D</option> 
 
      <option value="0">F</option> 
 
      </select> 
 
     </li> 
 
     <li data-role="fieldcontain"> 
 
      <label for="res">Result:</label> 
 
      <input type="text" name="res" id="res" value="" data-clear-btn="true"> 
 
     </li> 
 
     <li class="ui-body ui-body-b"> 
 
      <fieldset class="ui-grid-a"> 
 
      <div> 
 
       <button type="button" id="cal" name="cal" data-theme="f">Calculate</button> 
 
      </div> 
 
      </fieldset> 
 
     </li> 
 
     <li class="ui-body ui-body-b"> 
 
      <fieldset class="ui-grid-a"> 
 
      <div> 
 
       <button type="reset" data-theme="d">Reset</button> 
 
      </div> 
 
      </fieldset> 
 
     </li> 
 
     </ul> 
 
    </form> 
 
    </div>