Onclick increment number Globally

JavaScript
1

Hi,

I’ve tried numerous scripts to try to get a click within the browser to increment a number. But yet unsuccessful so far.
Clicking buttons to increment a number etc… Works fine. But for some reason the global event listener is a harder nut to crack for me.

I tried a couple of things and this and showing here. Maybe somebody can point me out where I got wrong and where I should look at.

And I have pen where you see that clicking below doesn’t change the incrementation:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
    </head>
    <body id="clickme" background="img.jpeg">
    0

        <script src="" async defer>
var button = document.getElementById("clickme"),
  count = 0;
button.onclick = function() {
  count += 1;
  button.innerHTML = count;
};

        </script>
    </body>
</html>
2

hi, i just checked your codepen and the event listener is working just

Screenshot from 2021-06-23 21-54-48
Screenshot from 2021-06-23 21-54-481347×686 69.8 KB

if this is not what you meant, can you be more specific about the problem you’re facing?

3

Not sure I understand, but if you want an event listener on the document you can just attach it to that.

document.addEventListener("click", () => {
  count += 1;
  button.innerHTML = "Click me: " + count;
});
1 Like
4

Completely oftrack question, but what, if I want to add a sound trigger on each click?

Anyways thanks for your help so far!!

5

quintendewilde Each audio element has a play method. you can add an event listener to the document element and on each click use the play method of your audio element to play it.

6

As said, you can use the audio element or the Audio constructor.

You can look at the HTMLMediaElement interface to see the properties and methods (HTMLVideoElement and HTMLAudioElement elements both inherit this interface).

1 Like
7

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