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

【问题标题】：How can I add items and buttons as numbered list如何将项目和按钮添加为编号列表
【发布时间】：2021-10-18 18:04:41
【问题描述】：

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

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

到目前为止我的代码：

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>

var input2 = document.getElementById("button1");

input2.addEventListener("click", addStuff);

function addStuff() {
  todo = text1.value;
  add.innerHTML += todo + "<br />";
}

【问题讨论】：

标签： javascript html button textinput numbered-list

【解决方案1】：

我鼓励您在以下列表的帮助下自己创建它。但如果你遇到困难，你可以使用ready-made code。

您必须添加<ol> 标签，以便添加注释。
添加一个使用innerHTML 方法从列表中删除内容的方法。
创建一个删除单个注释的方法。在使用事件对象中，您可以获取单击按钮的父级，并使用 remove() 方法将其从 DOM 中删除。
在addStuff 方法中，获取文本字段的值。然后使用createElement 方法创建button 和li，为它们添加所需的属性，并将button 附加到li 和li 到ol 列表。

有用的链接

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

请使用此代码。

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>

【讨论】：