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

Posted 2023-04-18

【中文标题】如何将项目和按钮添加为编号列表

【英文标题】：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>

JS

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

input2.addEventListener("click", addStuff);

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

【参考方案1】：

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

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

有用的链接

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

【参考方案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>