对象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>

window.onload=函数（）{
var quran=document.getElementById（'quran'）。值；
var islamic=document.getElementById（'islamic'）.value；
var阿拉伯语=document.getElementById（'arabic'）。值；
var english=document.getElementById（'english'）。值；
var games=document.getElementById（'games'）.value；
var pc=document.getElementById（'pc'）。值；
var math=document.getElementById（'math'）.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；
变量结果=数字（古兰经）+数字（伊斯兰）+数字（阿拉伯语）+数字（英语）+数字（游戏）+数字（电脑）+数字（数学）+数字（化学）+数字（物理）+数字（生物）+数字（社会）；
}
函数resultFunc（）{
document.getElementById（'result'）。value=result；
}

这是包含输入的表格：

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

المادة الدراسية
الدرجة العظمى
درجة الطالب
القرآن الكريم
20
التربية الإسلامية
40
اللغة العربية
60
اللغة الإنجليزية
60
البدنية
20
الحاسوب
20
الرياضيات
80
الكيمياء
60
الفيزياء
60
الأحياء
40
الإجتماعيات
40
المجموع
500
النسبة

对不起，这里有阿拉伯单词，请看代码：）

---

我甚至尝试在单元格中而不是在输入标记中打印结果，但它在打印结果时给了我类似的错误…

问题似乎是由于在

窗口.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 htmlinputtement]

是因为变量

result

的作用域。由于在

resultFunc

中声明了

var result

，该值立即丢失<代码>[object HTMLInputElement]被呈现，因为

窗口。result

也是HTML文档中id为

result

的元素的快捷方式