Как получить доступ к тексту li, чтобы создать новый список с JavaScript

Question

Я не могу заставить эту функцию работать правильно. он только перечисляет первое слово списка продуктов (по умолчанию это еда), и если я выбираю более одного элемента из списка продуктов, он не создает новый li для каждого выбора. Что я делаю неправильно?

На данный момент лучший подход, который я нашел, - это разделить строку списка на массив и затем добавить индекс 0 в 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>

Answer 2

У вас есть if (list.checked = true), это не похоже на сравнение со мной - оно всегда оценивается как истинное.