Как вывести время в каждый новый элемент разметки

Question

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

Код для создания карточки:

const containerNote = document.querySelector('.note-container')

document.querySelector('.btn-addNote').addEventListener('click', function () {
    let displayNote = `
        <div class="card w-100 mt-5">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="note-date">
                    <p class="show-time text-secondary"></p>
                </div>

                <div class="checkers">
                    <input type="radio" aria-label="Radio button for following text input" class="input-focus mr-3">
                    <button type="button" class="btn btn-danger btn-del" onclick="delNote(this)">Delete button</button>
                </div>
            </div>
            <div class="card-body">
                <textarea name="" id="" cols="30" rows="10" class="w-100" style="border: 0"
                onfocus="addFocusToNote(this)" onblur="removeFocusToNote(this)"
                ></textarea>
            </div>
        </div>
    `
    containerNote.innerHTML += displayNote
})

Функция для вывода даты:

let time = () => {
    let today = new Date()
    let day = today.getDay()
    let month = today.getMonth()
    let year = today.getFullYear()

    document.querySelector('.show-time').innerHTML = `${day}.${month}.${year}`
}

Answer 1

const containerNote = document.querySelector('.note-container')

document.querySelector('.btn-addNote').addEventListener('click', function() {
  let displayNote = `
        <div class="card w-100 mt-5">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div class="note-date">
                    ${time()}
                </div>

                <div class="checkers">
                    <input type="radio" aria-label="Radio button for following text input" class="input-focus mr-3">
                    <button type="button" class="btn btn-danger btn-del" onclick="delNote(this)">Delete button</button>
                </div>
            </div>
            <div class="card-body">
                <textarea name="" id="" cols="30" rows="10" class="w-100" style="border: 0" onfocus="addFocusToNote(this)" onblur="removeFocusToNote(this)"></textarea>
            </div>
        </div>
    `
  containerNote.innerHTML += displayNote
})

function delNote(that) {
  that.closest('div.card').remove()
}

function addFocusToNote(that) {
  that.closest('div.card').querySelector('.input-focus').checked = true
}

function removeFocusToNote(that) {
  that.closest('div.card').querySelector('.input-focus').checked = false
}

const time = () => {
  let today = new Date()
  let day = today.getDay()
  let month = today.getMonth()
  let year = today.getFullYear()

  return `${day}.${month}.${year}`
}

<button class="btn-addNote">+</button>

<div class="note-container"></div>

Answer 2

Весь код не переписываю, добавляю ключевые вещи:

let getTime = () => {
    let today = new Date()
    let day = today.getDay()
    let month = today.getMonth()
    let year = today.getFullYear()

    return `${day}.${month}.${year}`;
}

let parHtml = `<p class="show-time text-secondary">${getTime()}</p>`;

console.log(parHtml);

БЛОГ НА HUSL

Как вывести время в каждый новый элемент разметки

Ответы (2 шт):