html - object HTMLInputElement JavaScript error -
so basically, i'm doing webpage calculate school marks can't print result @ input value... instead, prints [object htmlinputelement]
here's javascript code:
<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> and here's table inputs:
<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> sorry arabic words, @ code :)
i've tried print result in cell instead of input tag, gave me similar error instead of printing result...
the issue appears due calculation occurring during window.onload event. in order calculate values should able move code onload event resultfunc function , allow calculate total when click button.
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; } also note reason why [object htmlinputelement] due scoping of variable result. since declare var result in resultfunc value lost. [object htmlinputelement] rendered, because window.result shortcut element in html document id of result.
Comments
Post a Comment