I’m somewhat new at web development. I’m trying to make a website that displays a leaderboard. Users should be able to type in how many more points they’ve earned since the last time they’ve logged points, and the value should add to the current value, and the leaderboard change accordingly.
I have the leaderboard set up and working fine with point values as variables I set in the code myself, but I can’t seem to figure out how to take what the user inputs, add it to their existing value, and update their point number so that not only does it permanently change in their view but in everyone else’s view as well (when the other users refresh, of course).
Currently, the log form is on a separate .html subpage than the leaderboard, but it is linked to the same .js file. I’m prepared to put the log form in a modal pop-up on the main page if need be.
I briefly looked into PHP but my site-hosting platform (Neocities) doesn’t support PHP.
My first attempt was:
pointValue = pointValue + inputtedValue;
But it did not update the main page, unsuprisingly…
I’ve looked at other Stack Overflow questions on the topic, and the most relevant one seemed to suggest storing the value in the computer’s memory so it would remain if you refreshed or closed the browser, however, I don’t see how that would cause an updated value for users on other computers.
//Get Elements
const username = document.getElementById("username");
const pswd = document.getElementById("pswd");
const words = document.getElementById("words");
//usernames+passwords
const avaUser = "username0";
const avaPwd = "pswd0";
const ellaUser = "username1";
const ellaPwd = "pswd1";
const abiUser = "username2";
const abiPwd = "pswd2";
const nataleeUser = "username3";
const nataleePwd = "pswd3";
const mercyUser = "username4";
const mercyPwd = "pswd4";
const maddieUser = "username5";
const maddiePwd = "pswd5";
//Points
var avaPoints = 1973;
var ellaPoints = 0;
var abiPoints = 445;
var nataleePoints = 1;
var mercyPoints = 0;
var maddiePoints = 2064;
if (username == avaUser && pswd == avaPwd) {
avaPoints = avaPoints + words;
} else if (username == ellaUser && pswd == ellaPwd) {
ellaPoints = ellaPoints + words;
} else if (username == abiUser && pswd == abiPwd) {
abiPoints = abiPoints + words;
} else if (username == nataleeUser && pswd == nataleePwd) {
nataleePoints = nataleePoints + words;
} else if (username == mercyUser && pswd == mercyPwd) {
mercyPoints = mercyPoints + words;
} else if (username == maddieUser && pswd == maddiePwd) {
maddiePoints = maddiePoints + words;
}/* Log Page: "Log Word Count" Title */
.logTitle {
text-align: center;
font-family: 'Nanum Pen Script', sans-serif;
font-weight: bold;
font-size: 5vw;
margin: 0 0 2.5% 0;
filter: drop-shadow(2px 2px 3px rgba(30,92,76, 1));
}
/* Log Page: Inputs */
.usernameInput, .pswdInput, .wordsInput {
display: block;
margin: auto;
font-family: 'Nanum Pen Script', sans-serif;
font-size: 1.5vw;
padding: 1% 3%;
border: solid 3px rgba(37,99,83, .8);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
background-color: rgba(255,255,255,0.9);
}
/* Log Page: labels */
.usernameLabel, .pswdLabel, .wordsLabel {
display: block;
text-align: center;
font-family: 'Nanum Pen Script', sans-serif;
font-size: 2.5vw;
}
/* Log Page: Username Label */
.usernameLabel {
margin: 0 0 1% 0;
}
/* Log Page: Password Label */
.pswdLabel, .wordsLabel {
margin: 4% 0 1% 0;
}
/* Log Page: Forgot Password Link */
.forgot {
display: block;
text-align: center;
font-family: 'Nanum Pen Script', sans-serif;
margin: 1% 0 0 0;
font-size: 1.5vw;
}
.link, .link:visited {
color: rgba(37,99,83, .8);
}
.usernameInput:focus, .pswdInput:focus, .wordsInput:focus {
outline: none;
}
/** Log Page: spacer between form and button */
.spacer {
margin: 6% 0;
}
/* Log Page: Log Button */
.signInButton {
margin: auto;
background-color: rgba(255, 255, 255, 1);
border-radius: 100px;
box-shadow: rgba(109, 109, 109, .2) 0 -25px 18px -14px inset,rgba(109, 109, 109, .15) 0 1px 2px,rgba(109, 109, 109, .15) 0 2px 4px,rgba(109, 109, 109, .15) 0 4px 8px,rgba(109, 109, 109, .15) 0 8px 16px,rgba(109, 109, 109, .15) 0 16px 32px;
color: rgba(0,0,0, 0.6);
cursor: pointer;
display: block;
font-family: 'Nanum Pen Script', sans-serif;
font-weight: bold;
padding: 1.5% 7%;
text-align: center;
text-shadow: 1px 1px 3px rgba(124, 124, 124, 1);
transition: all 250ms;
border: 0;
font-size: 1.75vw;
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
touch-action: manipulation;
}
/* Log Page: Log Button:Hover */
.signInButton:hover {
box-shadow: rgba(109, 109, 109,.35) 0 -25px 18px -14px inset,rgba(109, 109, 109,.25) 0 1px 2px,rgba(109, 109, 109,.25) 0 2px 4px,rgba(109, 109, 109,.25) 0 4px 8px,rgba(109, 109, 109,.25) 0 8px 16px,rgba(109, 109, 109,.25) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<script src="/script.js" defer></script>
<link href='https://fonts.googleapis.com/css?family=La Belle Aurore' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Nanum Pen Script' rel='stylesheet'>
</head>
<body>
<h2 class="logTitle"> Log Word Count </h2>
<form>
<div class="form">
<label class="usernameLabel"><b>Username</b></label>
<input class="usernameInput" id="username" type="text" placeholder="Enter Username" name="uname" required>
<label class="pswdLabel"><b>Password</b></label>
<input class="pswdInput" id="pswd" type="password" placeholder="Enter Password" name="psw" required>
<span class="forgot"><a class="link" href="mailto:232197@ystu.ycsd.york.va.us?subject=Forgot My Password&body=I forgor my password T^T. Can you remind me please? Thanks!">Forgot password?</a></span>
<label class="wordsLabel"><b>Number of Words</b></label>
<input class="wordsInput" id="words" type="text" placeholder="#" name="words" required>
<div class="spacer"></div>
<button class=signInButton type="submit">Log</button>
</div>
</form>
</body>
</html>>Solution :
To change data for all users, you need to change the data on the server.
That requires server-side programming of some form.
Neocities does not support any form of server-side programming.
To acheive this you’ll need to change your hosting service (or use multiple hosting services, e.g. with the data being provided by a web server hosted on a server which supports server-side programming and accessed with Ajax).