How can I add items and buttons as numbered list

Question

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

Answer 1

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.

1. You have to add the <ol> tag to which notes will be added.
2. Add a method that removes content from a list using the innerHTML method.
3. Create a method that removes a single note. Inside using event object you can get a parent of a clicked button and remove it from the DOM using the remove() method.
4. Within the 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.

Usefull links

• https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
• https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

Answer 2

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.

Answer 3

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>