Как использовать ввод 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:[email protected]?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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы изменить данные для всех пользователей, вам нужно изменить данные на сервере.

Это требует программирования на стороне сервера в той или иной форме.

Neocities не поддерживает какие-либо формы серверного программирования.

Для этого вам потребуется сменить службу хостинга (или использовать несколько служб хостинга, например, с данными, предоставляемыми веб-сервером, размещенным на сервере, который поддерживает программирование на стороне сервера и доступ к которому осуществляется с помощью Ajax).

Другие вопросы по теме