Ошибка object htmlinputelement

So basically, I’m doing a webpage to calculate my school marks but I can’t get it to print the result at the input value… Instead, it prints [object HTMLInputElement]

Here’s my 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 the table with the 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 for the Arabic words, just look at the code

I’ve even tried to print the result in a cell instead of an input tag, but it gave me a similar error instead of printing the result…

Answer by Otto Gallegos

Implement the hyperfactorial

,I am trying to make a simple html page with two text boxes and an a button that adds the two numbers together when clicked. In my output, I am only getting [object HTMLInputElement].,Science Fiction & Fantasy,

2021 Moderator Election Q&A – Question Collection

function addNumbers(elem1, elem2) {
  var a = document.getElementById(elem1).value;
  var b = document.getElementById(elem2).value;
  var c = Number(a) + Number(b);
  document.getElementById("testResult").innerHTML = c;
}

function addNumbers(elem1, elem2) {
  var a = document.getElementById(elem1).value;
  var b = document.getElementById(elem2).value;
  var c = Number(a) + Number(b);
  document.getElementById("testResult").innerHTML = c;
}

<input type="text" value="15" id="varA">
<input type="text" value="30" id="varB">
<input type="button" value="Add" onclick="addNumbers('varA', 'varB')"></input>
<h1 id="testResult"></h1>

Answer by Aya Vega

Hi guys, another lame question, Im sorry, but Ive been playing with this for a while and cant work out why this is happening.,I am trying to add some variables and display their contents in an input field. My code looks something like this:,Now, this gives me [object HTMLInputElement] in the text field instead of the value. How do I need to structure this in order for it to work?,thanks for the reply, but that just joins the strings together instead of adding the values and returning the sum.

I am trying to add some variables and display their contents in an input field. My code looks something like this:

var Num1 = document.getElementById('1stTotal');
var Num2 = document.getElementById('2ndTotal');
var Num3 = document.getElementById('3rdTotal');
var Num4 = document.getElementById('4thTotal');
var Num5 = document.getElementById('5thTotal');
				
var Total = Num1 + Num2 + Num3 + Num4 + Num5;
				
grandTotal.value = Total;

Answer by Louise Abbott

Javascript Calculator Issue With HtmlJavascript Calculator Issue With Html

<a href="javascript:remove_comment(79, comment, 40);">Remove</a>

function remove_comment(id, str, fid)
{
alert(str);
var x;

var r=confirm("Are you sure you wish to remove this "+str+"?");


document.getElementById("remove").innerHTML=x;
}

Answer by Raylan Sanders

Reach out to all the awesome people in our web development community by starting your own topic.
We equally welcome both specific questions as well as open-ended discussions.
,
In this block of code from fastupdate(), it appears that you copied and pasted three lines of code and forgot to edit the left hand side of the statements.,
We’re a friendly, industry-focused community of developers, IT pros, digital marketers,
and technology enthusiasts learning and sharing knowledge.
,
I have recently made a ajax script that works completely. It updates the database as required on click of the FU anchor. In the middle of the form I also have a yes | no option that copies the billing address to the shipping address, which also works.

The problem is once I have clicked yes to update the shipping as billing, then click FU, then I refresh to check its working, the shipping address comes up with

[object HTMLInputElement]

billing to shipping function:

function basa()
{
var ba=document.getElementById("ba").value;
var bs=document.getElementById("bs").value;
var bc=document.getElementById("bc").value;
document.getElementById("sa").value=ba;
document.getElementById("ss").value=bs;
document.getElementById("sc").value=bc;
}
function nobasa()
{
document.getElementById("sa").value="";
document.getElementById("ss").value="";
document.getElementById("sc").value="";
}

and the ajax script:

function fastupdate()
{
var custID = document.getElementById("custID").value;
var custName = document.getElementById("custName").value;
var status = document.getElementById("status").value;
var ip = document.getElementById("ip").value;
var dateIn = document.getElementById("dateIn").value;
var lead = document.getElementById("lead").value;
var email = document.getElementById("email").value;
var cell = document.getElementById("cell").value;
var work = document.getElementById("work").value;
var home = document.getElementById("home").value;
var time = document.getElementById("time").value;
var ba = document.getElementById("ba").value;
var bs = document.getElementById("bs").value;
var bc = document.getElementById("bc").value;
var ba = document.getElementById("sa").value;
var bs = document.getElementById("ss").value;
var bc = document.getElementById("sc").value;
var details = document.getElementById("details").value;

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	alert(xmlhttp.responseText);
	/*
    document.getElementById("fastupdate").innerHTML=xmlhttp.responseText;
	*/
    }
  }
xmlhttp.open("GET","fastupdate.php?custID="+ custID +"&custName="+ custName +"&status=" + status +"&ip=" + ip +"&dateIn=" + dateIn + "&lead=" + lead + "&email=" + email + "&cell=" + cell + "&work=" + work + "&home=" + home + "&time=" + time + "&ba="+ ba +"&bs="+ bs +"&bc="+ bc +"&sa="+ sa +"&ss="+ ss +"&sc="+ sc + "&details=" + details,true);
xmlhttp.send();
}

Answer by Holland Torres

Click the button in this example to select all the text in the
<input> element.
,
The HTMLInputElement.select() method selects all the text
in a <textarea> element or in an <input> element
that includes a text field.
,
In browsers where it is not supported, it is possible to replace it with a call to HTMLInputElement.setSelectionRange() with
parameters 0 and the input’s value length:
,
Calling element.select() will not necessarily focus the input, so it is
often used with HTMLElement.focus.

element.select();

A

I don’t like plastic. It’s easier for me from scratch on my knee and in a hurry. It’s gonna be like this on the floor: var oMenuWrap = document.querySelector(‘div.menu-wrap’);
var oMenuList = oMenuWrap.querySelector(‘div.menu-list’);
var aMenuItems = Array.prototype.slice.call(oMenuList.querySelectorAll(‘a.menu-item’));
oMenuWrap.animationDirectionLast = false; // Исходное направление вращения
var aSetAngles = [-90, -30, 30, 90, 150, 210]; // Исходный массив углов
var aTimings = {duration: 1000, easing: ‘ease-in-out’}; // Скорость и плавность вращения
/* Обработчик колеса мыши */
oMenuWrap.addEventListener(‘wheel’, function(ev) {
ev.preventDefault();
// Если идёт анимация, тогда ждём ёе завершения
if (oMenuWrap.animationProgress) {
return
}
// Устанавливаем флаг прогресса анимации
oMenuWrap.animationProgress = true;
// Запускаем функцию анимации с указанием направления
fSpinMenu((ev.deltaY || ev.detail || ev.wheelDelta) > 0, this);
});
/* Функция расчета и анимации /
function fSpinMenu(bDirection) {
// Если текущее направление не совпадает с последним, тогда…
if (oMenuWrap.animationDirectionLast != bDirection) {
// корректируем массив в зависимости от направления
(bDirection) ? aSetAngles.unshift.apply(aSetAngles, aSetAngles.splice(5)): aSetAngles.push.apply(aSetAngles, aSetAngles.splice(0, 1));
}
// Перебираем пункты
aMenuItems.forEach(function(el, index) {
// Расчёт углов
let nSR = aSetAngles[index]; // Начальный угол
let nSRF = nSR * -1; // Фикс начального угла
let nER = nSR + 60; // Конечный угол
let nERF = nER * -1; // Фикс конечного угла
// Запускаем анимацию в заданном направлении
if (bDirection) {
el.animationRun = el.animate([{
transform: rotate(${nER}deg) translateX(200px) rotate(${nERF}deg) scale(1, 1.53846)
}, {
transform: rotate(${nSR}deg) translateX(200px) rotate(${nSRF}deg) scale(1, 1.53846)
}], aTimings);
} else {
el.animationRun = el.animate([{
transform: rotate(${nSR}deg) translateX(200px) rotate(${nSRF}deg) scale(1, 1.53846)
}, {
transform: rotate(${nER}deg) translateX(200px) rotate(${nERF}deg) scale(1, 1.53846)
}], aTimings);
}
// Назначаем обработчик конца анимации
el.animationRun.addEventListener(‘finish’, function(ev) {
// Назначение текущих координат, как исходных
el.style.transform = (bDirection) ? rotate(${nSR}deg) translateX(200px) rotate(${nSRF}deg) scale(1, 1.53846) : rotate(${nER}deg) translateX(200px) rotate(${nERF}deg) scale(1, 1.53846);
// Сбрасываем флаг прогресса анимации
oMenuWrap.animationProgress = false;
});
});
// Сдвиг массива в зависимости от направления
(bDirection) ? aSetAngles.unshift.apply(aSetAngles, aSetAngles.splice(5)): aSetAngles.push.apply(aSetAngles, aSetAngles.splice(0, 1));
// Запоминаем направление
oMenuWrap.animationDirectionLast = bDirection;
} {
box-sizing: border-box;
}
.menu-wrap {
height: 435px;
position: relative;
text-align: center;
}
.menu-item {
background: url(//i.stack.imgur.com/KtQ9X.png) no-repeat;
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: 0px 2px 2px 0px rgba(21, 21, 21, 0.5);
display: inline-block;
height: 76px;
line-height: 10px;
position: absolute;
top: -12px;
transition: box-shadow .5s cubic-bezier(.66, -0.28, .13, 1.71);
width: 76px;
}
a.menu-item:hover {
box-shadow: 2px 25px 25px 0px rgba(21, 21, 21, 0.2);
transition: box-shadow .4s ease;
}
.menu-item>span {
font: bold 10px ‘Arial’;
position: relative;
top: 89px;
}
.menu-list {
display: inline-block;
transform: translateX(-38px) translateY(180px) scale(1, 0.65);
}
.menu-text {
background: url(//i.stack.imgur.com/KtQ9X.png) no-repeat center -196px;
background-size: auto auto;
height: 46px;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center center;
width: 192px;
}
/===============================

Sprites and start coords *
===============================/

.i-1 {
background-position: -358px -46px;
transform: rotate(-90deg) translateX(200px) rotate(90deg) scale(1, 1.53846);
}
.i-2 {
background-position: -546px -68px;
transform: rotate(-30deg) translateX(200px) rotate(30deg) scale(1, 1.53846);
}
.i-3 {
background-position: -546px -264px;
transform: rotate(30deg) translateX(200px) rotate(-30deg) scale(1, 1.53846);
}
.i-4 {
background-position: -358px -294px;
transform: rotate(90deg) translateX(200px) rotate(-90deg) scale(1, 1.53846);
}
.i-5 {
background-position: -166px -264px;
transform: rotate(150deg) translateX(200px) rotate(-150deg) scale(1, 1.53846);
}
.i-6 {
background-position: -166px -78px;
transform: rotate(210deg) translateX(200px) rotate(-210deg) scale(1, 1.53846);
}<div class=»menu-wrap»>
<div class=»menu-list»>
<a class=»menu-item i-1″><span>Designing</span></a>
<a class=»menu-item i-2″><span>Coding /<br>Implementation</span></a>
<a class=»menu-item i-3″><span>Testing</span></a>
<a class=»menu-item i-4″><span>Deployment /<br>Delivery</span></a>
<a class=»menu-item i-5″><span>Maintenance</span></a>
<a class=»menu-item i-6″><span>Requirement /<br>Analisis &amp; Planning</span></a>
</div>
<div class=»menu-text»></div>
</div>