时间戳

首页 > 解决方案 > 如何通过使用 DOM 单击提交按钮来获取文本值并将其添加到列表中？

javascript - 如何通过使用 DOM 单击提交按钮来获取文本值并将其添加到列表中？

问题描述

我在这里的第一个问题！

我正在尝试制作一个待办事项列表，其中每个待办事项都表示为一个 li。我有一个文本输入字段和一个提交按钮，但不知道如何从输入字段中获取文本值并将其添加到列表中。

这是我到目前为止所拥有的，我确信这完全是假的，因为我刚刚开始：

const submitButton = document.getElementById('submitButton');
let toDoText = document.getElementById('toDoText').value;

function addToDo() {
  submitButton.addEventListener('click', function() {
    let Li = document.getElementsByClassName('todo');
    let toDoText = document.getElementById('toDoText').value;
    for (let i = 0; i < Li.length; i++) {
      form.push(toDoText);
    }
  })
}
<h1>TO-DO List</h1>
<form id="form">
  <input type="text" placeholder="Write your todo" id="toDoText">
  <input type="submit" id="submitButton">
</form>


<li class="todo">Example 1</li>
<li class="todo">Example 2</li>

标签： javascriptevent-listener

解决方案

给你的<li>元素一个父元素，这样

<ul id="toDo">
      <li class="todo">Example 1</li>
      <li class="todo">Example 2</li>
 </ul>

然后 onclick，创建一个新的 li，用输入值填充它，并将其附加到父级。

submitButton.addEventListener('click', function () {
            let newLi = document.createElement("li");
            li.innerText = document.getElementById('toDoText').value;
            document.getElementById("toDo").appendChild(newLi);
        });

推荐阅读