javascript - 对象 HTMLInputElement JavaScript 错误

Question

所以基本上，我正在做一个网页来计算我的学校分数，但我无法让它打印输入值的结果......相反，它打印 [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>

抱歉阿拉伯语单词，看看代码:)

我什至尝试在单元格而不是输入标签中打印结果，但它给了我一个类似的错误而不是打印结果...

Answer 1

问题似乎是由于 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 的作用域。由于您在 resultFunc 中声明了 var result，因此该值会立即丢失。 [object HTMLInputElement] 被渲染，因为 window.result 也是 HTML 文档中 id 为 result 的元素的快捷方式。