I cant get my counter to work - anyone got any ideas?

Get Help HTML
#1 
    </head>
    <body>
        <button>Click Me</button>
        <br>
        <span id='count'>0</span> People Have clicked the button
            <script>
                $button = document.queryselector('button');
                $span = document.queryselector('span');
                function increment(){
                    $span.innerHTML++;
                }
                $button.addEventlistener('click',increment);
            </script>
    </body>
1 Like
#2

HTML (which is raw text) does not have an increment method.

let x = parseInt($span.textContent);
$span.textContent = (x++).toString(10);

This is not well formed. BODY should not (in terms of well formedness) contain any direct children that are not blocks. <span> and raw text are inline elements.

<p><span>0</span> People have clicked the button.</p>

It is not necessary to use $ on variables, unless it is to give special meaning, which in this instance is not the case. Likewise, having id="count" is redundant since you are caching the <span>. Were there other SPAN elements in the document, then the id would be a must to be able to isolate it from the others.

#3

I literally have no idea what i am doing. So i take all the help i can.

Any chance you can adjust the code to reflect what you mean?

#4 
<body>
  <button>Click Me</button>
  <p><span>0</span> People have clicked the button.</p>
  <script>
    const button = document.querySelector('button');
    const span = document.querySelector('span');
    function increment(){
      let x = parseInt(span.textContent);      // convert string to integer
      span.textContent = (x++).toString(10);   // increment and convert to text
    }
    button.addEventListener('click',increment);
  </script>
</body>
#5

ok - so i entered this code and it still won’t count my clicks. Any suggestions on what i might need to do?

#6

if you are going to use built-in functions (methods) like querySelector, at least make sure you spell it right. See documentation:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

1 Like
#7

My bad. Should have watched more closely.

#8

It should work after that small correction.

1 Like
#9

easy thing to miss. Nope, still not working. addEventListener also has a typo.

@kavuuu, javascript contains a lot of cammelCase, be aware

#10

Man, do I need stronger glasses.

It’s even in the name, JavaScript. Of course, you mean, camelCase.

1 Like
#13

i still can’t get it to work - must be something wrong that i cant figure out. I’m quite illiterate.

#14 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Counter</title>
</head>
<body>
  <button>Click Me</button>
  <p><span>0</span> People have clicked the button.</p>
  <script>
    const button = document.querySelector('button');
    const span = document.querySelector('span');
    function increment(){
      let x = parseInt(span.textContent); 
      x++;
      span.textContent = x;
    }
    button.addEventListener('click', increment);
  </script>
</body>
</html>
#15

x++ returns the value of x before increment, this seem to cause a problem given you are also converting to string. use ++x which returns the value after increment.

1 Like
#16 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Counter</title>
</head>
<body>
  <button>Click Me</button>
  <p><span>0</span> People have clicked the button.</p>
  <script>
    const button = document.querySelector('button');
    const span = document.querySelector('span');
    function increment(){
      let x = parseInt(span.textContent);
      span.textContent = ++x;
    }
    button.addEventListener('click', increment);
  </script>
</body>
</html>

All the conversion was unnecessary, as it turns out. Putting too much theoretical into this.

#17

Thanks - got it to work

1 Like