Creating a counter with js + html

Hi, I’m someone who is learning to code. Specifically websites. Im trying to make this simple counter using js and html but its not working -_- .
I was hoping if someone could give me some hints about what is it that im doing wrong with my event handlers if possible. Also, if I posted this question in the wrong forum pls let me know to remove it. Thanks.

my JS

const count = document.getElementById('#count');
const buttonAdd = document.getElementById('#add');
const buttonSub = document.getElementById('#subs');

let total = 0;

buttonAdd.addEventListener('click', function(){
    count.innerText = total;

buttonSub.addEventListener('click', function(){
    count.innerText = total;


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <h3 class="counter">COUNTER</h3>
        <h1 id="count">0</h1>
        <button id="add">add</button>
        <button id="subs">sub</button>
    <script type="text/javascript" src="./app.js"></script>

The issue isn’t your event handlers. Click below for another hint if you need and you can stop clicking the nested ones depending on how much direction you want.

Another hint

You should check your browser’s console by pressing

Shift + CTRL + J (Windows / Linux)
Option + + J (Mac)

Alternatively, you can press F12 and click on the Console tab.

Next nudge

It’s probably giving you a TypeError about “addEventListener of null” or something similar. That means you need to check how you are assigning count, buttonAdd, and buttonSub

Another hint

Check the documentation for getElementById() vs querySelector()


'#count' would be correct when using querySelector(), but you only need to use 'count' for getElementById()

1 Like

@selectall wow thank you so much. idk why I wasnt paying attention to my developers tools -_- . I feel stupid tbh. You’ve helped me tremendously.