时间戳

首页 > 解决方案 > 从用户的文本框输入动态创建单选按钮

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

问题描述

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

我创建了一个名为 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>

标签： javascripthtmlcheckboxevent-handlingradio-button

解决方案

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

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代码中也有一些错误。我希望您在顶部的作业部分中意识到这一点，并将 JSON 推送到 addItem()

推荐阅读