Question

我在生成列表时将复选框添加到我的列表时遇到问题。我希望能够选中或取消选中使用addToList函数添加的项目。

我尝试使用html并在javascript中创建函数，但仍然没有成功。

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);
};


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


````
HTML
````

<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>

Answer 1

structure(list(date = structure(c(10963, 10970, 10977, 10984, 
10991, 10998), class = "Date"), niftyreturns = c(1.31650630176203, 
0.584047024147951, -0.132578988695284, -1.33554800612288, 0.0406396054173438, 
9.31911281754924), currencyreturns = c(NA, 0.0345117017291674, 
0.137835997012159, 0.0917622932404161, 0, 0.011490168178474)), .Names = c("date", 
"niftyreturns", "currencyreturns"), row.names = c(NA, 6L), class = "data.frame")

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;

  let input = document.createElement('input');
  input.type = "checkbox";
  input.addEventListener('change', deleteTodo);

  let li = document.createElement("li");
  li.textContent = food + ' ' + amount + ' ' + unit + '.';
  li.appendChild(input);
  document.getElementById("foodlist").appendChild(li);
};


function addToPantry() {
  for (i = 0; i < foodlist.length; i++) {
    let name = foodlist[0];
    pantry.push(`${name}: [${amount}, [${unit}]]`)
  }
}

function deleteTodo(e) {
  e.currentTarget.parentNode.remove(e);
}

如何使用JavaScript将复选框添加到列表

1 个答案: