Как обновлять счётчик кликов?

Question

[Виктория]

Суть: хочу, чтобы при клике на кнопку увеличивалось число во фразе "Проголосовало .... человек".
Если disp.innerHTML = arr.length; внутри функции, то число показывается только после клика. А вне функции - не меняется. В чем ошибка?
Второй вопрос: есть ли возможность, чтобы эти данные сохранялись на сайте и выводились любому пользователю?
То есть, сколько раз нажата кнопка, видел каждый посетитель сайта, а не только я в течение одной сессии?

<input type="submit" name="vote" value="Голосовать" id="golos-form">
<p>Проголосовало <span id="count-golos"></span> человек</p>

var count = 0;
var arr = [count];
var btn = document.getElementById("golos-form");
var disp = document.getElementById("count-golos");
btn.onclick = function () {
count++;
arr.push(count);
};
disp.innerHTML = arr.length;

Comments

[szQocks]

1
2 - нет

[HardBot]

szQocks, навалил кринжа

Answer 1

[Сергей Соколов]

1. массив не «реактивный», как в каком-нибудь React или Vue. Простой обычный массив. Поэтому чтобы отобразить изменения его длины, надо каждый раз, при изменении, вручную вызывать disp.innerHTML = arr.length;
Поместить это и внутрь функции, и оставить на первый раз снаружи, чтобы показать исходное состояние.

2. «источник правды» – на сервере. Например, в БД хранить значение счётчика. При запросе страницы отдавать сразу же и текущее значение счетчика. При нажатии на кнопку, тут же сообщать серверу, что, мол, «увеличили на 1». Именно так, а не «значение стало 100500» – т.к. в это время кто-то друго тоже мог кликнуть. В ответ сервер возвращает очередное актуальное значение с учётом и других кликнувших.
Чтобы это всё работало вообще в реальном времени, можно использовать соединение WebSocket, по которому в обе стороны пересылать сообщения. От бразуера в бэк типа: "тут кликнули!". От бэка в бразуре "а вот новое значение суммы всех кликов: XXX"