Before explaining my problem I would like to specify that i'm new, I have never done anything like this before. The idea is simple, I would like to make a simple page hosted in Altervista that when a button is pressed add +1 to a counter. The fact is that I would like to make this counter "online" for everyone, in the sense that if two different people from two different computers press the button simultaneously the counter add 2 and is visible to all.
An extra is to add a simple "insert your user name here" to let the website store your username and show how in percentage you contributed to the total number, but I repeat this is only an extra.
This is what I wrote for now, please don't judge my abilities.
if (localstorage.clickcount) {
document.getElementById("myNumber").innerHTML = localStorage.clickcount;
}
function myFunction() {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("myNumber").innerHTML = localStorage.clickcount;
}
.button {
display: inline-block;
padding: 45px 75px;
font-size: 72px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<!DOCTYPE html>
<html>
<head>
<title> CIAO GRIFONINJA</title>
</head>
<body>
<h1 style="text-align: center;color: brown">SALUTA GRIFONINJA</h1>
<button class="button" , onclick="myFunction()">CIAO GRIFONINJA</button>
<p></p>
Saluti: <span id=myNumber></span>
</body>
</html>