對象HTMLInputElement JavaScript錯誤

Question

所以基本上，我正在做一個網頁來計算我的學習成績，但我不能讓它的輸入值打印結果...相反，它打印[對象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的作用域。既然你聲明var result在resultFunc價值立即失去。由於window.result也是呈現[object HTMLInputElement]，因爲window.result也是HTML文檔中元素的快捷方式，其ID爲result。