从用户的文本框输入动态创建单选按钮

Question

我正在使用 javascript 和 HTML 创建待办事项列表，用户可以在其中将项目输入文本框，然后单击 'add' 按钮创建一个带有用户项目作为标签的单选按钮。用户还可以删除、突出显示和排序列表中的所有项目，但现在我关心的是让 'add' 按钮起作用。

我创建了一个名为 itemsList 的数组来跟踪用户在其待办事项列表中的所有项目。当用户添加有效项目时，我现在正在努力让一个单选按钮出现在待办事项列表上。我刚开始学习 javascript 一周前，我对要使用的不同术语和函数的数量感到非常不知所措，我将不胜感激一些帮助或推动正确的方向。

我发现了一个与我正在尝试创建的示例有点相似的示例，但该项目不应出现在菜单中，而应显示为旁边带有标签的单选按钮。

示例：

我也发现这个有帮助，但我无法根据用户的输入在我的按钮旁边添加标签：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_create

代码：

let itemsList[];

function init(){
    console.log("Loaded");
    let button = document.getElementById("add").addEventListener("click", addItem);
    button.onclick = buttonClicked();
    let item = document.getElementById("item");
    item.onblur = validate;
}

function addItem(){
    console.log("validate");
    let item = document.getElementById("item");
    if(item.value.length < 1){
        alert("You need to enter at least 1 character.");;
    }else{
        itemsList.push({name: item, light: false, checked: false));
    }
}

function buttonClicked(){ //create radio button

    var x = document.getElementById("list");
    var radio = document.createElement("INPUT");
    radio.text = document.getElementById("item").value;
    radio.add(radio);

}

<html>
    <head>
        <title>To-Do List</title>
    </head>
    <body onload="init()">
        <div><h1>To-Do List</h1></div><br />
        <div>Enter item: <input type="text" id="item"></input><button type="button" id="add">Add Item</button></div>
        
        <div id = "list"></div>
        
        <div>
            <button type="button" id="remove">Remove Items</button>
            <button type="button" id="toggle">Toggle Highlight</button>
            <button type="button" id="sort">Sort Items</button>
        </div>
        
        <script src="t2.js"></script>
    </body>
</html>

Answer 1

下面的函数创建一个带有标签的单选按钮。

function createRadioButton() {
  var input = document.createElement("INPUT");
  input.setAttribute("type", "radio");
  input.setAttribute("id", "test");
  var label = document.createElement("LABEL");
  label.setAttribute("for", "test");
  label.innerText="Testing";
  document.body.appendChild(x);
  document.body.appendChild(label);
}

JS 代码中也存在一些错误。我希望您在顶部的作业部分意识到这一点，并在 addItem()

中推动 JSON

从用户的文本框输入动态创建单选按钮

Dynamically create radio button from user's textbox input

html

javascript

checkbox

event-handling

radio-button