Как использовать ввод HTML-формы для изменения значения на сайте для всех пользователей?
Я несколько новичок в веб-разработке. Я пытаюсь сделать веб-сайт, отображающий таблицу лидеров. Пользователи должны иметь возможность вводить, сколько очков они заработали с тех пор, как они в последний раз набирали очки, и значение должно добавляться к текущему значению, и таблица лидеров изменяется соответствующим образом.
У меня настроена таблица лидеров, и она отлично работает со значениями очков в качестве переменных, которые я сам задал в коде, но я не могу понять, как взять то, что вводит пользователь, добавить его к существующему значению и обновить их количество очков. так что это не только постоянно меняется в их представлении, но и в представлении всех остальных (конечно, когда другие пользователи обновляются).
В настоящее время форма журнала находится на отдельной подстранице .html, чем таблица лидеров, но она связана с тем же файлом .js. Я готов разместить форму журнала в модальном всплывающем окне на главной странице, если это необходимо.
Я кратко изучил PHP, но моя платформа для размещения сайтов (Neocities) не поддерживает PHP.
Моя первая попытка была: pointValue = pointValue + inputtedValue; Но главную страницу он не обновил, что неудивительно...
Я просмотрел другие вопросы о переполнении стека по этой теме, и наиболее актуальный из них, по-видимому, предлагал сохранить значение в памяти компьютера, чтобы оно оставалось, если вы обновите или закроете браузер, однако я не понимаю, как это могло бы вызвать обновленное значение для пользователей на других компьютерах.
//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>
Ответы 1
Чтобы изменить данные для всех пользователей, вам нужно изменить данные на сервере.
Это требует программирования на стороне сервера в той или иной форме.
Neocities не поддерживает какие-либо формы серверного программирования.
Для этого вам потребуется сменить службу хостинга (или использовать несколько служб хостинга, например, с данными, предоставляемыми веб-сервером, размещенным на сервере, который поддерживает программирование на стороне сервера и доступ к которому осуществляется с помощью Ajax).