Clickable html button counter using php or js

Question

I am very new to php and javascript and I was wondering how I could make a global counter that adds 1 to it every time a user presses a button. The number would stay the same even if someone is on a different computer or refreshes the page. I had this using javascript:

<script type="text/javascript">
var clicks = 0
function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
};
</script>
<button type="button" onClick="onClick()">Click me</button>
<footer>Clicks: <a id="clicks">0</a></footer>

But when ever someone refreshes the page, it resets the number, and it is not global. I tried making something in php which is:

<?php

$clicks = 0
public function clickButton()
{
    $clicks = $clicks + 1
}

?>

but I have no idea what I'm doing and how to call the php function or display the php variable.

Answer 1

Your current problem is that your Click variable is only storred on the one computer clicking.

You need to do 2 things:

1. Store the click variable.
2. Read the click variable.
3. (Live updates.)

---

Store the click variable:

As Vinicius Maia said you need a connection between the users and this can be done with a database, read about MySQL.

Or you can use a more simple method and use php to read and create / write the Click variable into a file named Clicks.txt. See PHP Filesystem Functions on W3C

---

Read the click variable:

If you chose the MySQL method you should use the commands as so, else if you chose the primitive method you can use the following command: Php File Get Content

---

Live updates:

To show the variable live and not making your users refresh you should be able to use AJAX so make sure to take a look at that. This question might be usefull.

You should make a interval loop which should constantly check for updates in the variable. This question might be usefull

---

Together:

Take a good look at Jonas w's answer, he gives a good example on how you could make this and he follows your request. Only downside by using this tactic is that everytime you click you refresh, which might be annoying for some users.

But what he does is:

1. He reads the variable.
2. When you click the button he runs the PHP code by opening it.
3. When done with the code he send you back to index and refresh the side
4. Repeat...

But for your users, maybe you should add the live function by using this system:

1. Read the variable.
2. Make a loop with AJAX that calls a php function that checks and return updates
3. When you click the button use AJAX to run another php function to update the variable
4. Repeat...

Answer 2

The php variables just work inside of one request. So if two people request your site, the script runs twice in two different versions. You have to store the variable on the server. You could store it into a mysql database ( good articles about that on php.net) or you could make a counter.txt and edit it with php. ("Fopen" on php.net)

The php runs on the server and cannot interact with the clients side js. You need to send this "button click" to the server. You can do this with AJAX ( google that) or reloading the site and passing gets and posts to the server

Update.php:

<?php
$file=fopen("counter.txt","c+");//open or create counter.txt
$counter=fread($file, 10);//read content
$counter=(int)$counter+1;//add one
fwrite($file,$counter);//save counter
fclose($file);//close file
Header("Location: index.php");//go back to index.php
?>

Index.php:

<?php
 $file=fopen("counter.txt","c+");
$counter=fread($file, 10);
fclose($file);
Echo $counter;
?>
<a href="update.php">Click me</a>

Answer 3

You have the right JavaScript logic, now you just need to store your clicks somewhere that won't be affected by a browser refresh!

My first suggestion would be to utilize HTML5's localStorage object.

The examples are pretty good on the link. See if you can make something work!

Answer 4

Javascript or PHP will not solve your problem. Just because what you need is some connection between all users that will access your website. For that, you must use some kind of database. I recommend you starting learning MySQL. Check this: http://php.net/manual/en/book.mysqli.php

Answer 5

if you need that different users see the same counter, then you will need save the counter in a database.

Regards.