How can I make a counter in HTML/CSS

Question

So I made a button thats suppose to keep track of how many time ANYONE clicked, like a total click counter. But I encounter an issue where when I reload the page, it resets back to 0. I want to make sure that it will count everyones click and save

  <script>
    let num = 0;
    function myFunction() {
    document.getElementById("num").textContent = ++num;
  }
  </script>
  
  <button class="button" onclick="myFunction()">
  <p id="num"></p>

See if this helps: https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage — ahsan, Jun 09 '21 at 12:28
Localstorage and cookies are not going to work here. This question asks about "how many time **ANYONE** clicked". That means they needs an answer which allows to share data between multiple users. — Philipp, Jun 09 '21 at 13:05

Philipp · Answer 1 · 2021-06-09T12:56:56.617

You can not do that with browser-based javascript alone. Your website is executed on the client and has no direct way to communicate with other clients. When you want to have any information in your client-sided javascript which is not available to the client (like who else is accessing the website), then you need to request that information from a server.

This means you need some form of server-sided programming to log and count page access, store the number on the server and embed that number in the HTML documents being delivered.

The technology options for server-sided web development are countless. Even just listing all the options you have would make this answer far too long. So I am not going to give you an example in any particular technology. Do your own research to get an overview of the technology options available to you and decide which one you would like to learn. When you are not sure how to do this in the technology you picked, feel free to ask a new question.

Thanks for your reply, I will try to do my own research – Dark Zero Jun 09 '21 at 12:45 — Dark Zero, Jun 09 '21 at 12:45

score -1 · Accepted Answer · answered Jun 09 '21 at 12:30

-1

you can save your current state into localstorage

like this

 <script>
    let num = localStorage.getItem("counter");
    function myFunction() {
    document.getElementById("num").textContent = ++num;
    localStorage.setItem("counter", document.getElementById("num").textContent);

  }
  </script>
  
  <button class="button" onclick="myFunction()">
  <p id="num"></p>

answered Jun 09 '21 at 12:30

frendy wijaya

77
4

@DarkZero It's not going to work for more than one user, though. It's called "localstorage" because it's local to the user and their device. What you would need is some kind of "serverstorage". But there is no such thing in the standard javascript API. – Philipp Jun 09 '21 at 12:58
1

I know, but this is a good stepping stone for me, I tried searching for more related documents and tutorials and got basic understanding of local storage and session storage. Trying to check sql and php now – Dark Zero Jun 10 '21 at 02:02

How can I make a counter in HTML/CSS

2 Answers2