主页 / 问题 / 1593017
Accepted
alexWithoutBeard
Asked:2024-09-06 17:17:24 +0000 UTC2024-09-06 17:17:24 +0000 UTC

重新输入不同年份时，将给定年份的 13 号所有星期五的日期打印为 uls 列表

  • 772

输入给定。年份已输入其中。将给定年份的 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>

如何更新已经输入的数据？

javascript

2 个回答

  1. 您可以简单地清除列表，然后添加元素......

    我将提供另一种选择。

    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>

    • 2
  2. Best Answer

    所以几乎一切都对你有利。问题是，在尝试更新列表时，您不是简单地替换其内容，而是添加了新元素，这会导致意外结果

    1. 每次进入新的一年，只需清除旧的列表项即可添加新的列表项

    2. 您还需要重新创建列表，而不是替换每个列表的内容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>

    • 1

相关问题