javascript - 对象HTMLInputElement JavaScript错误

所以基本上，我在做一个网页来计算我的学校分数，但我不能让它打印出输入值的结果。。。相反，它会打印[object HTMLInputElement]
这是我的JavaScript代码：

<script type="text/javascript"> </script>

<script>

    window.onload = function () {

        var quran = document.getElementById('quran').value;
        var islamic = document.getElementById('islamic').value;
        var arabic = document.getElementById('arabic').value;
        var english = document.getElementById('english').value;
        var games = document.getElementById('games').value;
        var pc = document.getElementById('pc').value;
        var maths = document.getElementById('maths').value;
        var chem = document.getElementById('chem').value;
        var phys = document.getElementById('phys').value;
        var bio = document.getElementById('bio').value;
        var social = document.getElementById('social').value;

        var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
    }

        function resultFunc() {
            document.getElementById('result').value = result;
        }

</script>

这是一张有输入的表格：

    <table class="rwd-table">
  <tr>
    <th>المادة الدراسية</th>
    <th>الدرجة العظمى</th>
    <th>درجة الطالب</th>
  </tr>
  <tr>
    <td data-th="Movie Title">القرآن الكريم</td>
    <td data-th="Genre">20</td>
    <td data-th="Year"> <input value="" id="quran" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">التربية الإسلامية</td>
    <td data-th="Genre">40</td>
    <td data-th="Year"> <input value="" id="islamic" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">اللغة العربية</td>
    <td data-th="Genre">60</td>
    <td data-th="Year"> <input value="" id="arabic" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">اللغة الإنجليزية</td>
    <td data-th="Genre">60</td>
    <td data-th="Year"> <input value="" id="english" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">البدنية</td>
    <td data-th="Genre">20</td>
    <td data-th="Year"> <input value="" id="games" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">الحاسوب</td>
    <td data-th="Genre">20</td>
    <td data-th="Year"> <input value="" id="pc" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">الرياضيات</td>
    <td data-th="Genre">80</td>
    <td data-th="Year"> <input value="" id="maths" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">الكيمياء</td>
    <td data-th="Genre">60</td>
    <td data-th="Year"> <input value="" id="chem" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">الفيزياء</td>
    <td data-th="Genre">60</td>
    <td data-th="Year"> <input value="" id="phys" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">الأحياء</td>
    <td data-th="Genre">40</td>
    <td data-th="Year"> <input value="" id="bio" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <td data-th="Movie Title">الإجتماعيات</td>
    <td data-th="Genre">40</td>
    <td data-th="Year"> <input value="" id="social" style="width: 70px;" type="text"/> </td>
  </tr>
  <tr>
    <th>المجموع</th>
    <th>500</th>
    <th> <input style="width: 70px; background-color: gray;" id="result" value="" readonly /> </th>
  </tr>
  <tr>
    <th style="font-size: 20px;">النسبة</th>
    <th></th>
    <th> <input style="width: 70px; background-color: gray;" value="" readonly /> </th>
  </tr>
  <tr>
    <th></th>
    <th> <input onClick="resultFunc()" type="submit" id="submit" value="اضغط هنا لحساب النسبة المئوية" /> </th>
    <th></th>
  </tr>
</table>

对不起，请看代码：）
我甚至试过将结果打印到一个单元格而不是一个输入标记中，但是它给了我一个类似的错误而不是打印结果。。。

最佳答案

该问题似乎是由于在window.onload事件期间进行的计算造成的。为了计算这些值，您应该能够将代码从onload事件移动到resultFunc函数，它将允许您在单击按钮时计算总数。

function resultFunc() {
  var quran = document.getElementById('quran').value;
  var islamic = document.getElementById('islamic').value;
  var arabic = document.getElementById('arabic').value;
  var english = document.getElementById('english').value;
  var games = document.getElementById('games').value;
  var pc = document.getElementById('pc').value;
  var maths = document.getElementById('maths').value;
  var chem = document.getElementById('chem').value;
  var phys = document.getElementById('phys').value;
  var bio = document.getElementById('bio').value;
  var social = document.getElementById('social').value;

  var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);

  document.getElementById('result').value = result;
}

还请注意，获得[object HTMLInputElement]的原因是变量result的作用域。由于您在var result中声明resultFunc，该值将立即丢失。[object HTMLInputElement]被呈现，因为window.result也是HTML文档中id为result的元素的快捷方式。

关于javascript - 对象HTMLInputElement JavaScript错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45777335/