如何从输入中获取值并将输入值存储为新列表项的文本?

发布于 2025-01-10 05:11:36 字数 856 浏览 0 评论 0原文

当用户点击ID为generate-todo的按钮时,我想从ID为new-todo的输入中获取值,并存储输入值作为新列表项的文本,并将该新项附加到带有 todos 类的无序列表中。这是我到目前为止所尝试过的,但我错过了一些东西。

  let todo = document.querySelector('#generate-todo').addEventListener('click', function() { 
        todo = document.querySelector('#new-todo').value;
      const create = document.createElement('li');
      document.querySelector('.todos').append(create);  
  });
<label for="new-todo">Add a new item to the list:</label>
<input id="new-todo" type="text">
<button id="generate-todo">Add to the List!</button>
<h1>List of things to do</h1>
<ul class="todos">
</ul>

When the user clicks the button with the ID of generate-todo, I want to grab the value from the input with the ID of new-todo, and store the input value as the text of a new list item and append that new item to the unordered list with the class of todos. This is what I've tried so far but I'm missing something.

  let todo = document.querySelector('#generate-todo').addEventListener('click', function() { 
        todo = document.querySelector('#new-todo').value;
      const create = document.createElement('li');
      document.querySelector('.todos').append(create);  
  });
<label for="new-todo">Add a new item to the list:</label>
<input id="new-todo" type="text">
<button id="generate-todo">Add to the List!</button>
<h1>List of things to do</h1>
<ul class="todos">
</ul>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

小情绪 2025-01-17 05:11:36

这应该可以帮助你开始

document.getElementById('generate-todo').addEventListener('click', function() { 
        let todo = document.getElementById('new-todo').value;
      const li = document.createElement('li');
      li.innerText = todo;
      document.getElementById('todos').append(li);  
  });
<label for="new-todo">Add a new item to the list:</label>
<input id="new-todo" type="text">
<button id="generate-todo">Add to the List!</button>
<h1>List of things to do</h1>
<ul id="todos">
</ul>

this should get you started

document.getElementById('generate-todo').addEventListener('click', function() { 
        let todo = document.getElementById('new-todo').value;
      const li = document.createElement('li');
      li.innerText = todo;
      document.getElementById('todos').append(li);  
  });
<label for="new-todo">Add a new item to the list:</label>
<input id="new-todo" type="text">
<button id="generate-todo">Add to the List!</button>
<h1>List of things to do</h1>
<ul id="todos">
</ul>

阳光下的泡沫是彩色的 2025-01-17 05:11:36

您在 todos 选择器中缺少 .

document.querySelector(".todos").append(create)

You are missing a . in todos selector.

document.querySelector(".todos").append(create)
瀟灑尐姊 2025-01-17 05:11:36
function addToDo() {
  const text = document.getElementById("new-todo").value;
  const newItem = document.createElement('li');
  newItem.innerText = text;
  document.querySelector('.todos').appendChild(newItem);
  
  document.getElementById("new-todo").value = null;
}

document.getElementById("generate-todo").addEventListener('click', addToDo)
function addToDo() {
  const text = document.getElementById("new-todo").value;
  const newItem = document.createElement('li');
  newItem.innerText = text;
  document.querySelector('.todos').appendChild(newItem);
  
  document.getElementById("new-todo").value = null;
}

document.getElementById("generate-todo").addEventListener('click', addToDo)
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文