i am having problems adding checkboxes to my list as it is generated. i want to be able to check or uncheck items that are added using the addToList function.
I have tried playing around with the html, and making a function in the javascript, but still no success.
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>
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); }
<input type="text" name="" value="food" id="food"> <input type="text" name="" value="amount" id="amount"> <select id="unit"> <option value="oz">ounces</option> <option value="lb">pounds</option> <option value="servings">servings</option> </select> <button onclick="addToList(), addToPantry()" type="button" name="button" id="addButton">add</button> <ul id="foodlist"></ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.