I'm creating a to-do list using javascript and HTML where the user has the ability to enter an item into a textbox and then click the 'add' button which creates a radio button with the user's item as it's label. The user will also have the ability to remove, highlight, and sort all the items in their list but right now I'm concerned with getting the 'add' button to work.
I created an array called itemsList to keep track of all the items the user has on their to-do list. I'm struggling right now with actually getting a radio button to appear on the to-do list when the user adds a valid item. I just started learning javascript a week ago and I'm very overwhelmed with the amount of different terms and functions there are to use and I would appreciate some help or a push in the right direction.
I found an example that is sort of similar to what I'm trying to create but instead of the item appearing in a menu, it should just appear as a radio button with a label next to it.
Example: How to add textbox value into a list?
I also found this which helped but I'm having trouble adding a label next to my button with the user's input: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_create
Code:
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>
Aucun commentaire:
Enregistrer un commentaire