如何将项目和按钮添加为编号列表

Question

这是我的第一个项目。我正在尝试制作一个简单的待办事项清单以供练习。一个人在输入类型的文本上写下任何东西，它应该显示在下面的编号列表中。在列表中的项目旁边，应该有另一个按钮可以删除该项目。

如何在通过输入文本添加项目时使其成为编号列表，以及如何在添加项目的同时添加输入按钮？当输入文本仍然为空时，如何阻止它添加项目？

到目前为止我的代码：

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

看看ordered list tag。它默认处理编号列表，其中的每个项目都应该在 <li> 标签中。

在您的 addStuff 函数中，您需要 1. 获取 ol 元素，2. 在其中为您想要的每个项目添加一个新的 li。

Answer 2

请使用此代码。

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>

Answer 3

我鼓励您借助以下列表自行创建它。但是如果你卡住了，你可以使用 ready-made code.

您必须添加要添加备注的 <ol> 标签。
添加一个使用 innerHTML 方法从列表中删除内容的方法。
创建一个删除单个注释的方法。在使用事件对象中，您可以获得单击按钮的父项，并使用 remove() 方法将其从 DOM 中删除。
在 addStuff 方法中，获取文本字段的值。然后用createElement方法创建一个button和li，分别给它们添加需要的属性，在li和[=15=后面追加button ] 到 ol 列表。

如何将项目和按钮添加为编号列表

How can I add items and buttons as numbered list

javascript

html

button

textinput

numbered-list

有用的链接