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的范围。由于您在var result中声明resultFunc，因此该值会立即丢失。呈现[object HTMLInputElement]，因为window.result也是HTML文档中元素为result的元素的快捷方式。

object HTMLInputElement JavaScript错误

1 个答案: