HTML javascript function issue. [object HTMLInputElement] error output
Solution 1
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/.
Solution 2
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>
Oriol
What happened with Time to take a stand made me stop contributing to the Stack Overflow community. I explained my feelings here. Eventually the issue was solved correctly and the question was locked with the proper message. I don't hold a grudge, but at the moment I have other projects at hands, so I don't plan to become actively involved again. And thanks for the 100k cup, I don't like coffee but since it's so big I use it to make crêpes :) § Quotes I like: Java is to JavaScript what Car is to Carpet The argument of speed in JS engines is only dead in the mind of people who can't function without jQuery, since it's an argument they can't win. — by Blue Skies, posted here. § Funny: jQuery is taking over the world! Zalgo is coming!
Updated on October 06, 2020Comments
-
Oriol over 3 years
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.-
Admin over 9 years
varA
is theinput
element, not its value, which would bevarA.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. -
Oriol over 9 yearsNote
input
elements have no content, so you can use<input ...>
or<input ... />
, but not<input ...></input>
.
-
-
Admin over 9 yearsWhile that works, the
addNumbers
is no longer useful for any other element types. -
JME over 9 yearsThen you can simply pass the ids of the elements as strings to the function. I've updated my answer.