Форум

DenM · #1 (**permalink**) 04.05.2021, 21:34

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

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

DenM · #2 (**permalink**) 04.05.2021, 21:36

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

ksa · #3 (**permalink**) 04.05.2021, 21:46

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

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

Сама эта фраза не имеет смысла...

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

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

рони · #4 (**permalink**) 04.05.2021, 21:50

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

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

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

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

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

DenM · #5 (**permalink**) 05.05.2021, 12:59

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

<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);

voraa · #6 (**permalink**) 05.05.2021, 13:17

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

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

рони · #7 (**permalink**) 05.05.2021, 13:22

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>

DenM · #8 (**permalink**) 05.05.2021, 22:33

Спасибо

DenM · #9 (**permalink**) 05.05.2021, 22:34

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

Форум

Справочник

Discord чат

Курсы javascript