javascript & html - 每次用户在文本框中输入项目时创建新的复选框选项

Question

所以基本上我正在创建一个允许用户创建和管理“待办事项列表”的程序。这将允许用户添加新项目、删除选定项目、highlight/un-highlight 选定项目以及对项目进行排序等。我目前正在处理添加按钮，但我对 [ 中的不同功能感到非常困惑=31=] 和允许我操作 DOM 的代码。

当用户单击添加按钮并且项目名称有效时，应将新项目添加到页面的待办事项列表中（这实际上为用户添加的每个项目创建了一个新复选框）。复选框基本上是这样的项目可以是 selected/deselected，以及单击添加按钮时项目名称文本框中的文本。

我想我现在有两个问题。我正在尝试验证项目名称至少有 1 个字符长。我在 "addHandler.js" 文件中编写了代码，但是当我在文本框中什么都不写并单击 HTML 浏览器上的添加按钮时，没有弹出错误消息。我不知道为什么它忽略了我的功能。我正在努力解决的另一件事是为每个添加的有效项目创建一个新复选框的部分。我知道如何在我的 HTML 页面上创建一个复选框，但我不明白如何让我的程序为用户输入的每个项目创建一个新的复选框。

任何帮助或推动正确的方向将不胜感激。我也是 HTML 和 javascript 的新手，所以用简单的术语解释这些东西也会让我非常感激。

todo.html代码：

<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代码：

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

Answer 1

您应该有一个包装器，其中包含您可以向其添加新元素的复选框项。

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

然后您可以使用以下函数创建一个包含复选框和输入文本的新 div，然后将其附加到您的清单中：

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

我还会使用以下方法将功能添加到您的按钮：

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

javascript & html - 每次用户在文本框中输入项目时创建新的复选框选项

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

html

javascript

textbox

button