Форум

underground · #1 (**permalink**) 03.08.2022, 18:17

Доброго времени суток уважаемые форумчане. Мне необходимо сделать html-страницу со списком сообщений на форуме и формой для добавления нового сообщения. После заполнения формы добавить сообщение к списку на экране. На каждом новом сообщении должно отображаться дата и время создания сообщения. Помогите разобраться как сделать, чтоб дата и время фиксировались и отображалось в сообщении.

<div id="container">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </p>
</div>
<div class="input">
      <input type="text" placeholder="your message" />
      <button>add new message</button>
</div>

const button = document.querySelector("button");
      const input = document.querySelector("input");
      const container = document.querySelector("#container");
      button.addEventListener("click", () => {
        if (input.value) {
          container.insertAdjacentHTML("beforeend", `<p>${input.value}</p>`);
          input.value = "";
        }
      });

рони · #2 (**permalink**) 03.08.2022, 18:42

underground,
https://learn.javascript.ru/date
https://learn.javascript.ru/intl

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #container p:before {
            content: attr(data-data)" - ";
            color: #8B4513;
            font-weight: bold;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const button = document.querySelector("button");
            const input = document.querySelector("input");
            const container = document.querySelector("#container");

            const formatter = new Intl.DateTimeFormat("ru", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit"
            });


            button.addEventListener("click", () => {
                if (input.value) {
                    let data = new Date();
                    data = formatter.format(data);
                    container.insertAdjacentHTML("beforeend", `<p data-data="${data}">${input.value}</p>`);
                    input.value = "";
                }
            });


        })
    </script>
</head>

<body>
    <div id="container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
    <div class="input">
        <input type="text" placeholder="your message" />
        <button>add new message</button>
    </div>
</body>

</html>

рони · #3 (**permalink**) 03.08.2022, 18:42

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

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

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

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

underground · #4 (**permalink**) 03.08.2022, 18:54

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript