Ad

How To Access Li Text To Create New List With Javascript

- 1 answer

I cannot get this function to work correctly. it only list the first word of foodlist (by default is food) and if i select more than one item from foodlist it does not create a new li for each selection. what am i doing wrong?

So far the best approach i have found is splitting the list string into an array and then appending the 0 index to the searchList ul. but it will only list the first item from the 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").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>

Ad

Answer

Beside the wrong comparison, which is an assignment, you need to take the elements of foodlist and check if one input is checked. Then update the list.

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>

Ad
source: stackoverflow.com
Ad