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

Question

我的第一个问题！

我正在尝试制作一个待办事项列表，其中每个待办事项都表示为一个 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>

Answer 1

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

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

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

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

Answer 2

我的建议是使用createElement('li') and setting the text(value) of the created element using createTextNode(input.value). Finally you have the insert the todo item, so we use insertBefore(newElm, currentElm)。

const submitButton = document.getElementById('submitButton');

function addToDo() {

  // We select a container so we can insert our todo items in it
  let container = document.querySelector('div');
  
  // We get the value from the input
  let input = document.querySelector('#toDoText').value;
  
  // We create an element for each gotten input value
  const todo = document.createElement("li");
  
  // We set the text(value) of the todo item(li)
  const txt = document.createTextNode(input);
  
  // We append the text(value) to do created element(li)
  todo.appendChild(txt);
  
  // Finally we insert the last result(todo with value) inside the container(div)
  document.body.insertBefore(todo, container);
};

// We run the function
submitButton.addEventListener('click', addToDo);

// We prevent the form submit so we don't get any errors or blank page
document.querySelector("form").addEventListener('submit', e => e.preventDefault());

<form id="form">
  <input type="text" placeholder="Write your todo" id="toDoText">
  <input type="submit" id="submitButton">
</form>


<div>
</div>

Answer 3

我通过添加说明对您的代码进行了一些更改。

首先，因为您只有提交按钮，所以您可以在其自身的表单上使用提交事件侦听器。

然后防止在按下提交按钮时重新加载页面 .preventDefault() 您可以阅读更多相关信息 here.

要从表单中获取值，我们将使用名称而不是 ID，它与您使用的代码几乎相同，但您可以使用 todoForm.elements[FIELDNAME]

虽然为了在列表中创建新元素，您可以使用字符串文字，其中通过使用关闭 `` 之间的字符串，您可以通过关闭然后在 [=] 中将变量传递给它14=]

对于 .innerHTML +=，我们将把该字符串作为 HTML 作为最后一个元素附加。

const todoForm = document.forms["todoForm"]; // getting form DOM via it's name

todoForm.addEventListener('submit', addToDo); // adding submit listener to the form

function addToDo(evt) {
  evt.preventDefault(); // preventing the page to be reloaded after submit
  const list = document.getElementById('todoList');
  let toDoText = todoForm.elements["todoText"].value // getting value from input with todoText name
  
  list.innerHTML += `<li class="todo">${toDoText}</li>` // appending li element to todoList by using string literal
  todoForm.reset(); // resetting the form to the user can add new data.
}

<h1>TO-DO List</h1>
<form name="todoForm">
  <input type="text" placeholder="Write your todo" name="todoText">
  <input type="submit">
</form>

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

Answer 4

我通常使用new FormData()来获取输入数据。像这样：

const form = document.getElementById("form");
const todos = document.getElementById("todos");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(e.target)
  const todo = document.createElement("li");
  todo.innerText = formData.get("todo");
  todo.setAttribute("class", "todo");
  todos.appendChild(todo);
  form.reset();
})

<form id="form">
  <input type="text" name="todo" placeholder="Write your todo" id="toDoText">
  <button type="submit">Submit</button>
</form>

<ol id="todos">
  <li class="todo">Example 1</li>
  <li class="todo">Example 2</li>
</ol>

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

How to take text value and add it to list by clicking submit button using DOM?

javascript

event-listener