CODEWITHSUNDEEP
javascripthtmlbuttontextbox
Grayish
Grayish

Reputation: 187

javascript & html - creating new checkbox option everytime user enters item in textbox

So basically I'm creating a program that allows the user to create and manage a ‘to-do list’. This will allow the user to add new items, remove selected items, highlight/un-highlight selected items, and sort the items, etc. I'm currently working on the add button, but I'm extremely confused with different functions in HTML and code that will allow me to manipulate the DOM.

When the user clicks the add button and the item name is valid, a new item should be added to the page’s to-do list (which esentially creates a new checkbox for every item the user adds). The checkbox is basically so the item can be selected/deselected, as well as the text that was in the item name textbox when the add button was clicked.

I guess I have two problems right now. I'm trying to verify that the item name is at least 1 character long. I wrote code in my "addHandler.js" file but when I write nothing in the textbox and click on the add button on my HTML browser, no error message pops up. I don't know why it's ignoring my function. Another thing I'm struggling with is the part that creates a new checkbox for every valid item that is added. I know how to create a checkbox on my HTML page, but I don't understand how to get my program to create a new one per item that the user inputs.

Any help or push in the right direction would be appreciated. I'm also new to HTML and javascript, so explaining stuff in simple terms would also make me really grateful.

todo.html code:

<html>
    <head>
        <title>Checklist</title>
    </head>
    <body>
        <div><h1>My to-do list</h1></div><br />
        <div id ="myCheckList">Enter an item:</div>
        <div>Type something: <input type="text" id="textbox"></input></div>
        <button type="button" id="addBut">Add item</button>
        <button type="button" id="removeBut">Remove items</button>
        <button type="button" id="toggleBut">Toggle highlight</button>
        <button type="button" id="sortBut">Sort items</button>
        <script src="addHandler.js"></script>
    </body>
</html>

addHandler.js code:

function init(){
    let button = document.getElementById("addBut");
    button.onclick = buttonClicked;
    let tb = document.getElementById("textbox");
    tb.onblur = validate;
}

function add(){
    let someEle = document.getElementById("myCheckList");
    someEle.innerHTML = 'You added an item';
}

function validate(){
    if(document.getElementById("textbox").value.length == 0){
        alert("You need to enter something");
    }
}

Upvotes: 1

Views: 218

Answers (1)

MiK
MiK

Reputation: 913

You should have a wrapper that contains your checkbox items that you can append new elements to.

<div id="checklist_items"></div>

Then you can use the following function to create a new div that contains a checkbox and the entered text, and then append it to your checklist:

function addItem() {
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element.innerHTML = '<input type="checkbox"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else {
        alert("You must enter at least 1 character.");
    }
}

I would also use the following to add the function to your button:

document.getElementById("addBut").addEventListener("click", addItem);

Upvotes: 1

Related Questions