Why JavaScript Says 5 + 5 = 55 (and How to Fix It)

I hit this bug building my first JavaScript calculator: two input boxes, one button, and 5 + 5 politely gave me 55.
You build a small calculator in JavaScript. Two input boxes, one button. You type 5 in the first box, 5 in the second, click the button, and the page says 55. Not 10. If that just happened to you, nothing is wrong with your maths or your computer. It’s one of the most common beginner bugs in JavaScript, and it takes one line to fix once you know why it happens.

This guide explains why JavaScript adds 5 + 5 and gets 55, shows three ways to fix it, and helps you pick the right one. If you haven’t built the calculator yet, start with my JavaScript mini projects for beginners, where it’s the first project.

Why JavaScript Says 5 + 5 = 55

Here is the code that causes the bug. It reads the two boxes and adds them:

let a = document.getElementById("num-1").value;
let b = document.getElementById("num-2").value;
let result = a + b;
console.log(result); // type 5 and 5 and you get "55"

The problem is .value. Whatever the user types into an input box, JavaScript gives it back as text (a string), even if it looks like a number. So a is not the number 5. It’s the text “5”.

Now look at the + sign. In JavaScript, + does two different jobs. With two numbers it adds them. With two strings it joins them together, which is called concatenation. “5” joined to “5” is “55”, exactly like “Hello ” + “world” is “Hello world”.

Why minus and times still work

This is what makes the bug so confusing. If you change + to -, * or /, the calculator suddenly works. That’s because those signs only mean maths, so JavaScript quietly turns the strings into numbers first:

"5" + "5"   // "55"  (joins the text)
"5" - "5"   // 0     (turns them into numbers)
"5" * "5"   // 25
"10" / "2"  // 5

Only + has two meanings, so only + breaks. Even <input type="number"> doesn’t change this: the box only lets the user type numbers, but .value is still a string.

3 Ways to Fix 5 + 5 = 55 in JavaScript

The fix is always the same idea: turn the text into a number before you add. JavaScript gives you three common ways to do that.

1. parseInt() for whole numbers

let result = parseInt(a) + parseInt(b);  // 5 + 5 = 10

parseInt() reads the text from the left and keeps the whole number it finds. It’s what my mini projects post uses, and it’s fine when you only need whole numbers. Two things to know: it drops decimals, so parseInt("3.7") is 3, and it stops at the first character that isn’t a digit, so parseInt("12px") is 12. That second one is handy for reading CSS values but can hide typos in a calculator.

2. Number() for decimals

let result = Number(a) + Number(b);  // "2.5" + "2.5" gives 5

Number() converts the whole string or nothing. It keeps decimals, and if the text isn’t a real number, like “12abc”, it gives NaN (Not a Number) instead of guessing. One surprise: an empty box gives 0, because Number("") is 0. For most calculators, Number() is the best choice.

3. valueAsNumber for number inputs

<input id="num-1" type="number">

let a = document.getElementById("num-1").valueAsNumber;

If your input uses type="number", you can skip the conversion and read .valueAsNumber, which is already a number. An empty box gives NaN. This only works on number (and date) inputs; on a normal text box it’s always NaN.

Which Fix Should You Use?

• Whole numbers only (ages, scores, dice): parseInt().

• Prices, measurements, any calculator: Number().

• You already use type="number": .valueAsNumber.

Check for NaN Before Showing the Answer

Whichever way you pick, a user can still type something that isn’t a number, or leave a box empty. Then your page shows “The result is NaN”, which looks broken. Check first with Number.isNaN():

function calculate() {
  let a = Number(document.getElementById("num-1").value);
  let b = Number(document.getElementById("num-2").value);
  let result = a + b;

  if (Number.isNaN(result)) {
    document.getElementById("answer").textContent = "Please enter two numbers.";
  } else {
    document.getElementById("answer").textContent = "The result is " + result;
  }
}

If you also want to catch empty boxes (which Number() turns into 0), add a check like if (input.value.trim() === "") before converting.

The Same Bug in Other Places

Once you know about it, you’ll spot this bug everywhere text comes into your program:

• prompt() always returns a string, so prompt("Age?") + 1 turns 20 into “201”.

• Values from localStorage come back as strings too.

• Data from an API is usually already a number, but some APIs send numbers as text. Check with typeof before doing maths. My guide on how to make websites using an API shows how to read API data in JavaScript.

A quick way to debug any of these is console.log(typeof a). If it prints “string” and you expected “number”, you’ve found your bug.

What to Build Next

Now that your calculator adds properly, try extending it: add buttons for minus, times and divide, and show “Can’t divide by zero” when the second box is 0. The JavaScript mini projects post builds a full calculator step by step, and if you’re brand new to JavaScript, how to make a website using JavaScript covers variables, numbers and strings from the start.

I used AI to help draft this post, and tested every example in Chrome before publishing.

---

Originally published on my blog. I post new C, Python and AI-agent guides there regularly.