1

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

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

到目前为止我的代码：

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

3 回答 3

1

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

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

于 2021-08-16T17:40:45.037 回答
1

请使用此代码。

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>

于 2021-08-16T18:06:42.440 回答
1

我鼓励您在以下列表的帮助下自己创建它。但是如果你卡住了，你可以使用现成的代码。

  1. 您必须添加要添加<ol>注释的标签。
  2. 添加一个方法，使用该innerHTML方法从列表中删除内容。
  3. 创建一个删除单个注释的方法。在使用事件对象内部，您可以获取单击按钮的父级并使用该remove()方法将其从 DOM 中删除。
  4. 在该addStuff方法中，获取文本字段的值。然后使用该方法创建一个buttonand ，将所需的属性添加到每个属性中，并将其附加到列表中。licreateElementbuttonliliol

有用的链接

于 2021-08-16T18:22:51.773 回答