If an input displays [object HTMLInputElement] instead of a number, your code is using the input element itself rather than the text entered into it. Read each element’s .value, convert numeric strings before adding, and write the result to the output input’s .value.
What the message means
document.getElementById("someId") returns an HTMLInputElement object: the element in the page. It does not return the number or text currently typed into that field. When JavaScript converts that object to text for display, the result is commonly shown as [object HTMLInputElement].
As an Amazon Associate I earn from qualifying purchases.
This is a coding mistake, not a browser defect. A historical SitePoint Community discussion from July 28–29, 2006 illustrates the same element-versus-value confusion.
Read the entered value
Use the input’s value property:
const firstInput = document.getElementById("1stTotal");
const firstText = firstInput.value;The HTMLInputElement.value property represents the current value as a string. Even when the field contains digits, JavaScript still receives text until you convert it.
#1 Best Overall
Convert values before adding
Using + on strings concatenates them. For example, "10" + "5" produces "105", not 15. Convert each input value before performing arithmetic.
A concise total-calculation pattern
const ids = ["1stTotal", "2ndTotal", "3rdTotal", "4thTotal", "5thTotal"];
const total = ids.reduce((sum, id) => {
const input = document.getElementById(id);
return sum + Number(input.value);
}, 0);
document.getElementById("grandTotal").value = total;Here, getElementById() obtains each element, .value obtains its string content, Number() converts that content for numeric addition, and the final number is assigned to the output input’s .value.
Rank #2
Handle blank or invalid fields deliberately
The example above is a compact pattern for fields intended to contain numeric strings, not a complete validation policy. Decide what your form should do when a field is empty or contains invalid text before displaying a total. Depending on your requirements, you might reject submission, show an error, or apply a documented blank-field rule. Do not assume one parser handles every possible number format.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Quick Recap
Rank #4
Check the output and your IDs
- Confirm every input has the exact ID used in JavaScript; IDs are case-sensitive.
- Read the source element’s
.value, not the element object itself. - Assign the result to the destination input’s
.value. For non-input elements such as a<div>or<span>, render text with the appropriate text-content property instead. - If the message appears only after form submission, inspect the code that renders the submission result. A separate report using similar wording involved an email/phone form but did not include enough implementation code to establish its cause.
Common incorrect and corrected code
| Problem | Correct approach |
|---|---|
total = first + second; where first and second are elements |
Read their values: Number(first.value) + Number(second.value) |
total = first.value + second.value; for numeric fields |
Convert before adding: Number(first.value) + Number(second.value) |
output = total; when output is an input element |
Set output.value = total |
Quick troubleshooting checklist
- Inspect the variable returned by
document.getElementById(); it should be treated as an element reference. - Append
.valuewhen reading an input. - Convert the string with
Number()before numeric addition. - Assign the calculated result to the destination input’s
.value. - Verify all IDs and decide how blank or invalid values should be handled.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
