HTML javascript function issue. [object HTMLInputElement] error output

Question

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

function addNumbers(A, B){
  var answer = A + B;
  document.getElementById("testResult").innerHTML = answer;
}

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

Any help would be appreciated. I tried changing .innerHTML to .value already but then I get nothing at all as a result.

varA is the input element, not its value, which would be varA.value. However, you're going to need to change that to a number before adding it together, or else you'll end up with string concatenation. — user663031
– user663031, Commented Oct 5, 2014 at 18:12
Note input elements have no content, so you can use <input ...> or <input ... />, but not <input ...></input>. — Oriol
– Oriol, Commented Oct 5, 2014 at 18:50

JME · Accepted Answer · 2014-10-05 19:07:13Z

2

I assume you want the mathematical sum and not the string concatenation. If that's the case, you can use the following:

UPDATE based on comment:

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>

Here's a working Fiddle: http://jsfiddle.net/JohnnyEstilles/ex09fx7k/.

edited Oct 5, 2014 at 19:07

answered Oct 5, 2014 at 18:18

JME

3,63220 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1106925 Over a year ago

While that works, the addNumbers is no longer useful for any other element types.

JME Over a year ago

Then you can simply pass the ids of the elements as strings to the function. I've updated my answer.

Oriol · Accepted Answer · 2014-10-05 18:57:54Z

1

Some fixes:

You are adding up the inputs elements instead of their value.
To convert its string value to a number, you can use unary +.
Instead of inline event listeners, better use addEventListener.

var a = document.getElementById('varA'),
    b = document.getElementById('varB'),
    result = document.getElementById("testResult");

document.getElementById('add').addEventListener('click', function() {
  addNumbers(a.value, b.value);
});

function addNumbers(n1, n2){
  result.textContent = +n1 + +n2;
}

<input type="text" value="15" id="varA">
<input type="text" value="30" id="varB">
<input type="button" id="add" value="Add">
<h1 id="testResult"></h1>

answered Oct 5, 2014 at 18:57

Oriol

291k71 gold badges459 silver badges535 bronze badges

Collectives™ on Stack Overflow

HTML javascript function issue. [object HTMLInputElement] error output

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related