时间戳

首页 > 解决方案 > 试图用 li 创建一个按钮，但它不起作用

javascript - 试图用 li 创建一个按钮，但它不起作用

问题描述

我正在尝试使用类似于待办事项列表的数组制作杂货清单应用程序。我已经让它与一个添加按钮一起工作，并且有一个删除按钮可以从列表中删除一个项目。但是现在我正在尝试使每个 li 创建一个删除按钮，以便可以有选择地删除每个杂货项目。我试了一下，但我不太确定我在这里做错了什么。

let addButton = document.getElementById('add-button');
addButton.addEventListener('click', add);

let addInput = document.getElementById('add-input');

//let removeButton = document.getElementById('remove-button');
//removeButton.addEventListener('click', remove);

let groceryList = [

]

function add() {
  groceryInput = addInput.value;
  groceryList.push(groceryInput);
  addInput.value = '';
  displayGroceries();
}

function remove(event) {
  let position = event.currentTarget.id;
  groceryList.splice(position, 1);
  displayGroceries();
}

function displayGroceries() {
  let groceryUl = document.getElementById('grocery-ul');
  groceryUl.innerHTML = '';

  for (let i = 0; i < groceryList.length; i++) {
    let groceryLi = document.createElement('li');
    groceryLi.innerHTML = groceryList[i];
    groceryUl.appendChild(groceryLi);

  }

  let removeButton = document.createElement('button');
  removeButton.innerText = "Remove";
  removeButton.addEventListener('click', remove);
  removeButton.id = i;
  groceryLi.appendChild(removeButton);

}
<div class="container">
  <h1>Grocery List</h1>
  <input id="add-input" placeholder="Add Groceries" autocomplete="off">
  <button id="add-button">Add</button>
  <!--<button id="remove-button">Remove</button>-->
  <div>
    <ul id="grocery-ul"></ul>
  </div>

标签： javascripthtmlarraysbutton

解决方案

它不能作为你在 for 循环外调用的groceryLi.appendChild(removeButton) 工作。

您已经使用 let 定义了groceryLi，并且 let 具有块作用域。

移动代码以在内部添加按钮可解决问题

查找 displayGroceries 的固定方法如下

function displayGroceries() {
  let groceryUl = document.getElementById('grocery-ul');
  groceryUl.innerHTML = "";
  for (let i = 0; i < groceryList.length; i++) {
    let groceryLi = document.createElement("li");
    groceryLi.innerHTML = groceryList[i];
    let removeButton = document.createElement("button");
    removeButton.innerText = "Remove";
    removeButton.addEventListener("click", remove);
    removeButton.id = i;
    groceryLi.appendChild(removeButton);
    groceryUl.appendChild(groceryLi);
  }
}

推荐阅读