如何使用 Vanilla JavaScript 动态更改 ID 属性

Question

我目前正在构建一个待办事项列表应用程序。

我正在使用 insertAdjacentHTML 方法将新项目添加到列表中，并且效果很好。 我的问题仍然是如何动态更改 id 属性，当我向列表中添加新项目时它开始增加 1。

我该如何解决？

这是代码：

function addTaskFunc() {

    const aTask = `
    <div class="task" id="task-0">
    <button class="done__btn">
        <i class="far fa-check-square"></i>
    </button>
    <p>${box.value}</p>
    <button class="priority">Make priority</button>
    <button class="cancel__btn">
        <i class="far fa-times-circle"></i>
    </button>

    </div>
`;
    const x = box.value;
    taskList.insertAdjacentHTML('afterbegin', aTask);
    box.value = '';
}

newTask.addEventListener('click', addTaskFunc); 

Answer 1

添加一个计数器（ idCounter ）并在模板文字中使用它，并在您使用它时递增它：

let idCounter = 0;

function addTaskFunc() {
  const aTask = `
    <div class="task" id="task-${idCounter++}">
    <button class="done__btn">
        <i class="far fa-check-square"></i>
    </button>
    <p>${box.value}</p>
    <button class="priority">Make priority</button>
    <button class="cancel__btn">
        <i class="far fa-times-circle"></i>
    </button>

    </div>
`;
  const x = box.value;
  taskList.insertAdjacentHTML('afterbegin', aTask);
  box.value = '';
}

Answer 2

您可以使用每次添加新任务时递增的变量。

这种方法略有不同，因为它提供了一个 TaskBuilder 构造函数，这只是为了避免全局变量和与其他脚本的潜在冲突。

function TaskBuilder() {
  if (!new.target) {
     throw new Error("Illegal argument error, you should call this function as a constructor.");
  }
  this.currentId = 0;
}

TaskBuilder.prototype.addTask = function() {
  const aTask = `
    <div class="task" id="task-${this.currentId}">
    <button class="done__btn">
        <i class="far fa-check-square"></i>
    </button>
    <p>${box.value}</p>
    <button class="priority">Make priority</button>
    <button class="cancel__btn">
        <i class="far fa-times-circle"></i>
    </button>

    </div>
`;
  const x = box.value;
  taskList.insertAdjacentHTML('afterbegin', aTask);
  box.value = '';

  this.currentId++;
};

const taskBuilder = new TaskBuilder();
newTask.addEventListener('click', function() {
  taskBuilder.addTask();
});