Форум

osv · #1 (**permalink**) 06.04.2025, 16:46

Доброго времени суток!
Пытаюсь создать появляющийся на несколько секунд блок с текстом, со следующими правилами:
На странице будет несколько кнопок, по клику на которые будет создаваться сообщение с тем или иным текстом и 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, но не понимаю как.

рони · #2 (**permalink**) 06.04.2025, 17:21

osv,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .EventMessageError {
            background-color: #f43587;
            color: #FFFFFF;
        }

        .EventMessageNormal {
            background-color: #40bb39;
            color: #FFFFFF;
        }
    </style>
    <script>
        let MessageBlockDestroyTimer;

        function EventMessage(MessageText, MessageType, Delay) {
            function MessageBlockRemove() {
                let block = document.getElementById('EventMessage');
                if (block) block.remove();
            }

            function MessageBlockCreate() {
                MessageBlockRemove();
                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) {
                window.clearTimeout(MessageBlockDestroyTimer);
                MessageBlockDestroyTimer = window.setTimeout(MessageBlockRemove, Delay);
            }

            if (!document.querySelector(`.${MessageType}`)) MessageBlockCreate();
            else document.querySelector(`.${MessageType}`).textContent = MessageText;
            MessageBlockDestroy(Delay);
        }
    </script>
</head>

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

</html>

osv · #3 (**permalink**) 06.04.2025, 18:33

Цитата:

!document.querySelector(`.${MessageType}`) && MessageBlockCreate();

Здесь есть нюанс. Если будет несколько сообщений с одним классом CSS, то создание блока не состоится.
К примеру так:

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

При нажатии кнопки Normal 1, а затем Normal 2, сообщение не создается.
Если исправить на

!MessageBlockCreate();

то работает. Спасибо!

рони · #4 (**permalink**) 06.04.2025, 19:11

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

При нажатии кнопки Normal 1, а затем Normal 2, сообщение не создается.

исправлено

Форум

Справочник

Discord чат

Курсы javascript