Unable to create a label in a todo list web app

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>

Look at the order you’re doing your appendChild() calls - the div is the parent of the input, and the input is the parent of the label.

Is that your intent?

yes, div>input>label.

So not like a label would normally go. Labels can contain inputs, but inputs, by the html spec don’t contain anything.

Didn’t knew that. Now I have changed the code by appending in the order div>lab>inp and it’s working. Thanks for the info.

1 Like