Javascript-форум - addEventListener и передача параметров через функцию

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - addEventListener и передача параметров через функцию (https://javascript.ru/forum/misc/82423-addeventlistener-i-peredacha-parametrov-cherez-funkciyu.html)

addEventListener и передача параметров через функцию

Добрый вечер!

Подскажите пожалуйста, попытался у себя локально запустить данный примерhttps://learn.javascript.ru/coordina...tsionirovaniya. Проблема заключается в том, что не знаю, как передать вызов данной функции в переменную message

Что-то скриншот здесь сильно ужимается..

Цитата:

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

не знаю, как передать вызов данной функции в переменную message

Сама эта фраза не имеет смысла... :no:
Переменной можно присвоить некую функцию... Можно присвоить ссылку на функцию, которая была присвоена другой переменной...
В переменную можно записать результат, который вернула некая функция...

Но "передать вызов данной функции в переменную"... Как это понять? :blink:

DenM,
пишите код, скриншоты потом.

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Да, речь шла о присвоении результата вызова функции

<p><button id="coords-show-mark">Кнопка с id=«coords-show-mark», сообщение появится под ней</button></p>

let elem = document.getElementById("coords-show-mark");

  function createMessageUnder(elem, html) {
    // создаём элемент, который будет содержать сообщение
    let message = document.createElement('div');
    // для стилей лучше было бы использовать css-класс здесь
    message.style.cssText = "position:absolute; color: red";

    // устанавливаем координаты элементу, не забываем про "px"!
    let coords = elem.getBoundingClientRect();

    message.style.left = coords.left + "px";
    message.style.top = coords.bottom + "px";

    message.innerHTML = html;

    return message;
  }

  // Использование:
  // добавим сообщение на страницу на 5 секунд
  elem.addEventListener('click', createMessageUnder(elem, 'Hello, world!'));
  //let message = createMessageUnder(elem, 'Hello, world!');
  document.body.append(message);
  setTimeout(() => message.remove(), 5000);

Строки 22-25 так

elem.addEventListener('click', () => {
     const message = createMessageUnder(elem, 'Hello, world!');
     document.body.append(message);
     setTimeout(() => message.remove(), 5000);
  })

DenM,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <p><button id="coords-show-mark">Кнопка с id=«coords-show-mark», сообщение появится под ней</button></p>
    <script>
        let elem = document.getElementById("coords-show-mark");

        function createMessageUnder(elem, html, delay) {
            // создаём элемент, который будет содержать сообщение
            let message = document.createElement('div');
            // для стилей лучше было бы использовать css-класс здесь
            message.style.cssText = "position:absolute; color: red";
            message.innerHTML = html;
            let timer;
            return () => {
                window.clearTimeout(timer);
                let coords = elem.getBoundingClientRect();
                // устанавливаем координаты элементу, не забываем про "px"!
                message.style.left = coords.left + "px";
                message.style.top = coords.bottom + "px";
                document.body.append(message);
                timer = setTimeout(() => message.remove(), delay);
            }
        }
        // Использование:
        // добавим сообщение на страницу на 5 секунд
        elem.addEventListener('click', createMessageUnder(elem, 'Hello, world!', 5000));
    </script>
</body>

</html>

Большое спасибо