This is my first project ever. I'm trying to make a simple to-do list for practice. One writes something, anything, on an input type text and it's supposed to show up below as a numbered list. Right next to the item in the list, there's supposed another button that eliminates the item.
How do I make it be a numbered list as I add items through the input text and how, at the same time, do I add input buttons along with the item? How do I stop it from adding items when the input text is still empty?
My code so far:
HTML
<div>
<input type="text" placeholder="Add an item!" id="text1" class="text1" />
<input type="button" value="Submit" id="button1" />
<input type="button" value="Clear List" id="button2" />
<p id="write"></p>
</div>
JS
var input2 = document.getElementById("button1");
input2.addEventListener("click", addStuff);
function addStuff() {
todo = text1.value;
add.innerHTML += todo + "<br />";
}
Take a look at ordered list tag. it handles the numbered list by default, each item inside of it should be in a <li> tag.
in your addStuff function you'd need to 1. get the ol element, 2. append inside of it a new li for each item yo want.
Please use this code.
var submitButton = document.getElementById("button1");
var clearButton = document.getElementById("button2");
var add = document.getElementById("write");
submitButton.addEventListener("click", addStuff);
clearButton.addEventListener("click", clear);
function addStuff()
{
todo = text1.value;
if(todo == "") {
alert("Please input data");
} else {
add.innerHTML += "<li>" + todo + "</li>";
}
}
function clear() {
add.innerHTML = "";
}ol {
list-style-type: decimal;
}<div>
<input type="text" placeholder="Add an item!" id="text1" class="text1">
<input type="button" value="Submit" id="button1">
<input type="button" value="Clear List" id="button2">
<ol id="write"></ol>
</div>I encourage you to create it on your own with the help of the following list. But if you get stuck you can use ready-made code.
<ol> tag to which notes will be added.innerHTML method.remove() method.addStuff method, take the value of the text field. Then create a button and li with the createElement method, add the required attributes to each of them, and append button to li and li to the ol list.