javascript - 如何使用 javascript 访问 li 文本来创建新列表

Question

我无法让这个功能正常工作。它只列出食物列表的第一个单词(默认情况下是食物)，如果我从食物列表中选择多个项目，它不会为每个选择创建一个新的 li。我究竟做错了什么？

到目前为止，我发现的最好方法是将列表字符串拆分为数组，然后将 0 索引 append 到 searchList ul。但它只会列出食物列表中的第一项。

function addToList(){
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;



  let li = document.createElement("li");
    li.textContent = food + ' ' + amount + ' ' + unit + '.';
    document.getElementById("foodlist").appendChild(li);

  let checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.value = 1;
    li.appendChild(checkbox);
};


function addToPantry () {
  for (i = 0; i<foodlist.length; i++){
    let name = foodlist[0];
    pantry.push(`${name}: [${amount}, [${unit}]]`)
  }


}

function addToSearch() {
  let list = document.getElementById("foodlist").innerText;
  let split = list.split(" ")

  if (list.checked = true){
    let li = document.createElement('li');
      li.textContent =split[0];
      document.getElementById("searchList").appendChild(li);
    }
  }

<input type="text" name="" value="food" id="food">
  <br><br>

<input type="text" name="" value="amount" id="amount">
  <br><br>

<select id="unit">
  <option value="oz">ounces</option>
  <option value="lb">pounds</option>
  <option value="servings">servings</option>
</select>
  <br><br>

<button  onclick ="addToList(), addToPantry()" type="button" name="button" id="addButton">add</button>

<ul id="foodlist"></ul>

<button onclick="addToSearch()" type="button" id="toSearch" name="button">Add To Search </button>

  </div>
<h3>You are searching for recipes containing:</h3>

<ul id="searchList"></ul>

Answer 1

除了错误的比较(这是一项赋值)之外，您还需要获取 foodlist 的元素并检查是否检查了一个输入。然后更新列表。

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;
  let li = document.createElement("li");
  li.textContent = food + ' ' + amount + ' ' + unit + '.';
  document.getElementById("foodlist").appendChild(li);

  let checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.value = 1;
  li.appendChild(checkbox);
}

function addToPantry() {
  for (i = 0; i < foodlist.length; i++) {
    let name = foodlist[0];
    pantry.push(`${name}: [${amount}, [${unit}]]`)
  }
}

function addToSearch() {
  let list = document.getElementById("foodlist").getElementsByTagName('li'),
      i;
      
  for (i = 0; i < list.length; i++) {
    if (list[i].querySelector('input').checked) { //
      let li = document.createElement('li');
      li.textContent = list[i].innerText;
      document.getElementById("searchList").appendChild(li);
    }
  }
}

<input type="text" name="" value="food" id="food">
<br><br>
<input type="text" name="" value="amount" id="amount">
<br><br>
<select id="unit">
  <option value="oz">ounces</option>
  <option value="lb">pounds</option>
  <option value="servings">servings</option>
</select>
<br><br>
<button onclick="addToList(), addToPantry()" type="button" name="button" id="addButton">add</button>
<ul id="foodlist"></ul>
<button onclick="addToSearch()" type="button" id="toSearch" name="button">Add To Search </button>
<h3>You are searching for recipes containing:</h3>
<ul id="searchList"></ul>