Clicker number render problem

[dull cargo]

I was trying to make a clicker and everything works except for rendering the number. i would be happy for any help 👍
Here is my scrim https://scrimba.com/scrim/czKR8ys9

[vagrant marlin]

You have a couple of problems here... first, countEl is initially null... This is because of the timing of when your .js is loaded.

To solve this either add the defer attribute to the script tag OR move it to the end of the file just before </body>

Once you've done that see if you can get further.

[dull cargo]

Thank you @vagrant marlin, but when I moved the script tag to the bottom of the body, the numbers that you get in the console became [object HTMLHeadingElement]1, [object HTMLHeadingElement]11, etc

[vagrant marlin]

Right - that's another bug you have...

when you have text and you use + that concatenates the strings... so "1" + 1 is NOT 2 it's "11"

so you need to rework some of your other code correspondingly...

For example this line:

let click = countEl + 1

Will never work... countEl is an element - what you need here is the textContent of the countEl converted to a number THEN add 1

like this:

let click = Number(countEl.textContent) + 1

Then later you need to set the textContent of countEl to the click you calculated:

countEl.textContent = click;

Of course you could simplify this all to a single line...

Spoiler: Here's the solution...
||```js
//let click = 0
let countEl = document.getElementById("number")

function increment() {
// let click = Number(countEl.textContent) + 1
// //console log increment works
// console.log(click)
// //textContent not working
// countEl.textContent = click
countEl.textContent = +countEl.textContent + 1;
}

[dull cargo]

Thank you @vagrant marlin, I will take a look at it and try to fix the problem, but I will go to bed now because it is getting late