如何从输入中获取值并将输入值存储为新列表项的文本?
当用户点击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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这应该可以帮助你开始
this should get you started
您在
todos
选择器中缺少.
。You are missing a
.
intodos
selector.