Выведите даты всех пятниц 13-е заданного года в виде списка ul при повторном введении другого года

Question

Дан инпут. В него вводится год. Выведите даты всех пятниц 13-е заданного года в виде списка ul.

Я написал следущий код:

<!DOCTYPE html>
<html>

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

<body>
  <input id="input" />
  <ul></ul>
  <script>
    let date = document.getElementById("input");

    let ul = document.querySelector("ul");

    document.getElementById("input").addEventListener("blur", function() {
      let year = date.value;
      let array = [];
      for (let month = 0; month < 12; month++) {
        let d = new Date(year, month, 13);
        if (d.getDay() == 5) {
          array.push(d);
        }
      }
      for (const friday of array) {
        let newListItem = document.createElement("li");
        newListItem.textContent = newListItem.textContent =
          friday.toLocaleString(undefined, {
            day: "numeric",
            month: "long",
          });
        ul.appendChild(newListItem);
      }
    });
  </script>
</body>

</html>

С задачей я справился, при введении первого года выводятся все даты пятниц 13го, но если ввести другой год, к уже введенным датам прибавляются даты другого года (и это нормально, так как при нажатии на кнопку запускается функция, которая создает новый li и добавляет его в список). Поэтому я решил написать следующий код, в котором проводится:

<!DOCTYPE html>
<html>

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

<body>
  <input id="input" />
  <ul></ul>
  <script>
    let date = document.getElementById("input");

    let ul = document.querySelector("ul");

    document.getElementById("input").addEventListener("blur", function() {
      let year = date.value;
      let array = [];
      for (let month = 0; month < 12; month++) {
        let d = new Date(year, month, 13);
        if (d.getDay() == 5) {
          array.push(d);
        }
      }
      if (ul.textContent.length === 0) // Проверка на пустоту ul
        for (const friday of array) {
          let newListItem = document.createElement("li"); // создание нового li
          newListItem.textContent = newListItem.textContent =
            friday.toLocaleString(undefined, {
              day: "numeric",
              month: "long",
            });
          ul.appendChild(newListItem); // добавление нового li в список при первой работе функции
        }
      else { // здесь я пытаюсь обновлять значения, если список не пустой
        let lis = document.querySelectorAll("li"); // ищу все li
        for (const li of lis) { // перебираю их
          for (const friday of array) // заново перебираю все пятницы  13 из массива
            li.textContent = li.textContent = friday.toLocaleString(undefined, {
              day: "numeric",
              month: "long",
            }); // меняю содержимое li на новые данные
          ul.appendChild(li) // думал, что добавляю измененное значение в список, но выходит дичь
        }
      }
    });
  </script>
</body>

</html>

Как обновлять уже введенные данные?

Answer 1

так у вас почти все получилось же всё. Недочет в том, что вы в попытке обновить список вместо того, чтобы просто заменить его содержимое, добавляете новые элементы, что приводит к неожиданным результатам

При каждом вводе нового года нужно просто очищать старые элементы списка перед тем, как добавлять новые
Также надо пересоздавать список, а не заменять содержимое каждого li

let date = document.getElementById("input");
let ul = document.querySelector("ul");

document.getElementById("input").addEventListener("blur", function() {
  let year = date.value;

  // Очищаем предыдущий список перед добавлением новых элементов
  ul.innerHTML = '';

  let array = [];
  for (let month = 0; month < 12; month++) {
    let d = new Date(year, month, 13);
    if (d.getDay() === 5) {
      array.push(d);
    }
  }

  // Добавляем новые элементы в список
  for (const friday of array) {
    let newListItem = document.createElement("li");
    newListItem.textContent = friday.toLocaleString(undefined, {
      day: "numeric",
      month: "long",
    });
    ul.appendChild(newListItem);
  }
});

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8" />
  <title>Пятницы 13-го</title>
</head>

<body>
  <input id="input" type="number" placeholder="Введите год" />
  <ul></ul>

</body>

</html>

Answer 2

Можно просто очистить список и потом добавлять элементы...

Предложу еще такой вариант.

const date = document.getElementById("input");

const ul = document.querySelector("ul");

date.addEventListener("blur", function() {
  const year = this.value;
  ul.innerHTML = ''
  new Array(12)
    .fill(13)
    .forEach((v, i) => {
      let d = new Date(year, i, v)
      if (d.getDay() != 5) return
      d = d.toLocaleString(undefined, {
        day: "numeric",
        month: "long",
      })
      ul.insertAdjacentHTML('beforeend', `<li>${d}</li>` )
    }, [])
});

<input id="input" />
<ul></ul>

БЛОГ НА HUSL

Выведите даты всех пятниц 13-е заданного года в виде списка ul при повторном введении другого года

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