Показать сообщение отдельно
  #1 (permalink)  
Старый 06.04.2025, 16:46
osv osv вне форума
Новичок на форуме
Отправить личное сообщение для osv Посмотреть профиль Найти все сообщения от osv
 
Регистрация: 25.07.2009
Сообщений: 8

Создание появляющегося на несколько секунд сообщения
Доброго времени суток!
Пытаюсь создать появляющийся на несколько секунд блок с текстом, со следующими правилами:
На странице будет несколько кнопок, по клику на которые будет создаваться сообщение с тем или иным текстом и CSS классом.
При последующем клике на туже кнопку, сообщение должно продлить показ.
При клике на другую кнопку, сообщение поменяет текст и CSS класс, а так же продлит показ.
Написал такой код:

.EventMessageError {
	background-color: #f43587;
	color: #FFFFFF;
}
.EventMessageNormal {
	background-color: #40bb39;
	color: #FFFFFF;	
}



<button onclick="EventMessage('Текст обычного сообщения', 'EventMessageNormal')"></button>
<button onclick="EventMessage('Текст сообщения об ошибке', 'EventMessageError')"></button>



function EventMessage(MessageText, MessageType) {
	
	function MessageBlockCreate() {
		let NewMessageBlock = `<div class="${MessageType}" id="EventMessage">${MessageText}</div>`;
		let NewMessageBlockPosition = document.querySelector('body');
		NewMessageBlockPosition.insertAdjacentHTML('afterbegin', NewMessageBlock);
		//console.log('Block crested');
	}
	function MessageBlockDestroy(Delay) {
		let MessageBlockDestroyTimer = window.setTimeout(() => {
			document.body.removeChild(document.getElementById('EventMessage'));
			//console.log('Block destroyed');
		}, Delay);
	}
	if (document.getElementById('EventMessage')) {
		document.body.removeChild(document.getElementById('EventMessage'));
	} else {
		MessageBlockDestroy(2500);
	}
	MessageBlockCreate();
}


Все работает так, как предполагалось, за исключением времени показа сообщения, оно равно времени установленному в setTimeout, на все последующие вызовы функции. Понимаю, что нужно сбросить setTimeout, но не понимаю как.

Последний раз редактировалось osv, 06.04.2025 в 17:05.
Ответить с цитированием