Hi camper, I am creating a web app ,i.e. todo list. All the html and css is done. For the javascript, in the code below, the user types something in the input, hits the
- button and the string gets displayed below in “listContainer” section. I am able to access the input and create a checkbox but the label isn’t showing up. I can see the label created in the console but not in the required div. Please help me in correcting the mistake.
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="sass/style.css">
<title>To Do List</title>
</head>
<body>
<main>
<section class="newItemEntry">
<form id="itemEntryForm">
<label for="newItem">Enter a new to do item</label>
<input id="newItem" type="text" autocomplete="off" placeholder="Add item" tabindex="0">
<button value="send" id="addItem" class="button" title="Add new item" aria-label="Add new item to list" tabindex="0">+</button>
</form>
</section>
<section class="listContainer">
<div class="listTitle">
<h1 tabindex="0">To Do List</h1>
<button id="clearItem" class="button" title="Clear The List" aria-label="Remove all items from the list" tabindex="0">Clear</button>
</div>
<hr>
<div id="listItems">
<!-- <div class="item">
<input type="checkbox" id="1" tabindex="0"><label for="1">eat</label>
</div>
<div class="item">
<input type="checkbox" id="2" tabindex="0"><label for="2">code</label>
</div> -->
</div>
<p class="confirmation" id="confirmation" aria-live="assertive"></p>
</section>
</main>
</body>
<script>
//to create the list
const but = document.getElementById('addItem');
but.addEventListener("click", (event) => {
event.preventDefault();
const test = document.getElementById('newItem').value;
localStorage.setItem("data", test);
console.log(test);
document.getElementById("newItem").value = '';
let no = document.getElementsByTagName("input");
const div = document.createElement("div");
div.className = "item";
const inp = document.createElement("input");
inp.type = "checkbox";
inp.tabIndex = "0";
inp.id = no.length++;
const lab = document.createElement("label");
lab.htmlFor = inp.id;
lab.textContent = test;
document.getElementById("listItems").appendChild(div);
div.appendChild(inp);
inp.appendChild(lab);
});
</script>
</html>