++ works but +=1 returns a string and I don't know how to fix it

JavaScript
#1

So I’m trying to make a basic counter to where when you click a button it makes the value go up by 1

++ works flawlessly however what if I want the increment to go up by 2? or 3? or 100? I can’t use ++ for that situation.

when I use += 1 which is suspposed to do the same thing it simply turns it into a string stacking 1’s

for example ++ actually counts up like it’s supposed to and += 1 just spits out 111111

I’ve tried to fix this in a number of ways and I can’t figure it out. Any help would be appreciated!

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
  <div>
    <h1>counter</h1>
    <h2 id="number">0</h2>
    <button>DECREASE</button>
    <button>RESET</button>
    <button id="increase-button">INCREASE</button>
  </div>

    <script src="index.js"></script>
</body>
</html>```

JAVASCRIPT

```let numberEl = document.getElementById('number')
let increaseButton = document.getElementById('increase-button')

numberEl.innerHTML = 0

increaseButton.addEventListener('click', function() {
    numberEl.innerHTML +=2
})```
#2

First of all note that you are retrieving the inner html, this is a string, in this case is =0 but also could be

“hello world”

or

<li>list item</li>

if you want to parse it as a number you can initialize a number variable

let number = 0

and then when you retrieve the content can use equal to set the variable value and increase the value. So when increase its value just put that variable in the innerhtml

number = numberEl.innerHTML if dont work use parseINT
increaseButton.addEventListener('click', function (){
number = number +2 //or number += 2
numberEl.innerHTML = number
}

edit: I wrote this whitout check if works maybe its some error

1 Like
#3

When you have string and number added, it will be conversed to string by default.

You need to avoid it

let a = 0
let b = "1"

console.log(a + b)//01
console.log(typeof(a + b))//string


console.log(a + Number(b));//1
console.log(typeof(a + Number(b)))//number
#4

but doesn’t it set it to a number when I did

numberEl.innerHTML = 0 ??
this is where I’m confused. I even tried wrapping it in Number() and it still spits out a string.

#5

Remember that ++ can only work on numbers so it will try to convert it to a number. The + operator can work with numbers for addition or strings for concatenation. It is concatenating in this case, so it evaluates to a string.

2 Likes
#6

I know it’s evaluating to a string, but I don’t know how to fix it haha.

using ++ is fine but I don’t know what to do if I had to increment by 5 for example, I can’t use ++ for that.

JesusMAes response was nice but it’s a tad confusing. I tried it and it didn’t work (I’m sure I did it wrong)

it’s nice that I got this to work but I wouldn’t be able to make it work if I wanted to increment by more than 1 and that bothers me.

#7

nah, its just my bad english. I made a quick codepen showing what i want to say

#8

Below your:

numberEl.innerHTML = 0

add:

console.log(typeof numberEl.innerHTML);

Then you will see the problem.

1 Like
#9

The document is a text document. There is no such thing as a written number only a string (symbolic) representation of a number. You do not write numbers but you do work on them as numbers. If what you get back from the document is a string it needs to be converted into a number before you can do any math on it. Or as suggested you can keep track of the value and work on it in JS as a number and then write it to the DOM (where it will be a string).

1 Like
#10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.