Question

你好，这就是我想做的。每当表格改变时，它将总和等级。但问题是当我试图总结它时，总数是NaN。有人可以帮我这个吗？

这是我的代码。

<!DOCTYPE html>
<html>
<head>

    <title></title>
    <link rel="stylesheet" href ="css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="shortcut icon" type="img/png" href="img/gapclogo.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .table-bordered{
        width: auto !important;
        margin-top: 200px;
    }
    </style>
</head>
<body>


    <table class="table table-bordered" align="center" >

        <thead>
            <tr>
                <th width="300">Name</th>
                <th width="100">Long Quiz 20%</th>
                <th width="100">Attendance 10%</th>
                <th width="100">Homework/Seatwork 20%</th>
                <th width="100">Recitation 10%</th>
                <th width="100">Major Exam 40%</th>
                <th width="100">Grade</th>
                <th width="100">Equivalent</th>
                 <th width="100">Remarks</th>

            </tr>
        </thead>
        <tbody>

            <tr>
                <td></td>
                <td contenteditable="true" onkeydown="Calculate();" id="quiz"></td>
                <td contenteditable="true" onkeydown="Calculate();" id="atten"></td>
                <td contenteditable="true" onkeydown="Calculate();" id="home"></td>
                <td contenteditable="true" onkeydown="Calculate();" id="reci"></td>
                <td contenteditable="true" onkeydown="Calculate();" id="me"></td>
                <td id="td_grade"></td>
                <td></td>
                <td></td>
            </tr>

        </tbody>
    </table>


    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
            function Calculate()
        {
            var q = parseInt(document.getElementById('quiz').value);
            var a = parseInt(document.getElementById('atten').value);
            var h = parseInt(document.getElementById('home').value);
            var r = parseInt(document.getElementById('reci').value);
            var m = parseInt(document.getElementById('me').value);

         var grade = q + a + h + r + m;

         document.getElementById('td_grade').innerHTML = grade;      
        }
    </script>
</body>
</html>

Answer 1

使用Unary plus(+) or Number代替parseInt，parseInt('')将被评估为NaN
使用textContent代替value
注意：使用onInput代替onkeydown

function Calculate() {
  var q = +(document.getElementById('quiz').textContent);
  var a = +(document.getElementById('atten').textContent);
  var h = +(document.getElementById('home').textContent);
  var r = +(document.getElementById('reci').textContent);
  var m = +(document.getElementById('me').textContent);

  var grade = q + a + h + r + m;

  document.getElementById('td_grade').innerHTML = grade;
}

.table-bordered {
  width: auto !important;
  margin-top: 200px;
}

<table class="table table-bordered" align="center">

  <thead>
    <tr>
      <th width="300">Name</th>
      <th width="100">Long Quiz 20%</th>
      <th width="100">Attendance 10%</th>
      <th width="100">Homework/Seatwork 20%</th>
      <th width="100">Recitation 10%</th>
      <th width="100">Major Exam 40%</th>
      <th width="100">Grade</th>
      <th width="100">Equivalent</th>
      <th width="100">Remarks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td contenteditable="true" oninput="Calculate();" id="quiz"></td>
      <td contenteditable="true" oninput="Calculate();" id="atten"></td>
      <td contenteditable="true" oninput="Calculate();" id="home"></td>
      <td contenteditable="true" oninput="Calculate();" id="reci"></td>
      <td contenteditable="true" oninput="Calculate();" id="me"></td>
      <td id="td_grade"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

总和是NaN - Javascript

1 个答案: