Форум

Test7387 · #1 (**permalink**) 04.04.2022, 13:50

Пытаюсь понять, как можно реализовать мою задумку (чисто технически не могу понять пока что).
Хочется сделать страницу, чтобы на неё могли заходить пользователи (скорее всего язык JS + сервер на NodeJS), (отдельный вопрос про авторизацию и хранение пользователей в БД не в рамках этого топика), на странице есть одна кнопка "Кнопка1" -> При нажатии на "Кнопка1" появляется надпись с именем пользователя, который авторизован на странице "ИмяПользователя1" и вместо "Кнопка1" появляется кнопка "Кнопка2" -> при нажатии на "Кнопка2" страница возвращается в исходное состояние, т.е. должна отобразиться "Кнопка1".
Вопрос 1: как на JS сделать так, чтобы при нажатии на "Кнопка1" на странице появлялись имя авторизованного пользователя и "Кнопка2".
Вопрос 2: как правильно обработать ситуацию, когда на странице будет второй пользователь и нажмёт ту же самую кнопку, что и первый.
Для наглядности скриншот:
https://pastenow.ru/GL8G9

Смотрел материалы в сторону "веб чат Node JS и сокетах с MongoDB", но вот про конкурентное нажатие на одну кнопку несколькими пользователями пока ничего не нашёл. Буду рад любым мыслям, подсказкам, куда копать, что поизучать.

рони · #2 (**permalink**) 04.04.2022, 14:37

Test7387,
откуда конкуренты возьмутся?
не нужна кнопка 2 , клик по кнопке меняет видимость блока приветствия и название на самой кнопке.

Test7387 · #3 (**permalink**) 04.04.2022, 15:03

По первому вопросу вроде бы сделал:

<html>
<p align="center">Нажатие на кнопку несколькими пользователями</p>
<p id="block1" style="display:block;">
	<button onclick="ShowButton2()">Кнопка1</button>
</p>
<p id="block2" style="display:none;">
	Авторизован [Пользователь1] <button onclick="ShowButton2()">Кнопка2</button>
</p>
</html>

<script>
function ShowButton2() {
	if (document.getElementById("block1").style.display == "block"){
		document.getElementById("block1").style.display = "none";
		document.getElementById("block2").style.display = "block";
	} else {
		document.getElementById("block2").style.display = "none";
		document.getElementById("block1").style.display = "block";
	}
}
</script>

Теперь представим ситуацию: открыли страницу - нажали на "Кнопка1" (первый пользователь) - страница поменяла состояние и показывает вместо "Кнопка1" текст "Авторизован Пользователь1" и "Кнопка2" -> открываем вторую вкладку (т.е. зашел второй пользователь).
Сейчас состояние страницы сбрасывается на исходное, т.е. второму пользователю показывается "Кнопка1".
Вопрос: как сделать так, чтобы сохранить состояние страницы и показывать второму пользователю "Авторизован Пользователь1" и "Кнопка2"?
Скриншот:
https://pastenow.ru/GL9C8

рони · #4 (**permalink**) 04.04.2022, 15:32

Сообщение от Test7387

По первому вопросу вроде бы сделал:

искать по форуму открывашка
по второму, можно хранить состояние авторизации в localStorage

Форум

Справочник

Discord чат

Курсы javascript