我在尝试制作待办事项清单时遇到问题。

huangapple
go评论94阅读模式
英文:

I am having problems when trying to make a to-do list

问题

我正在尝试创建一个JavaScript待办事项列表，但我遇到了问题：

  1. const inputEl = document.querySelector('form');    
  2. const buttonEl = document.querySelector('.todo-button');
  3. const todoUl = document.querySelector('.list');
  5. buttonEl.addEventListener('click', (addTodo)=> {
  7. });
  9. function addTodo() {
  10.     //添加具有类名 'todo' 的 div
  11.     const todoDiv = document.createElement('div');
  12.     todoDiv.classList.add('todo')
  14.     //创建 li
  15.     const todoLi = document.createElement('li');
  16.     todoLi.innerText = inputEl.value;
  17.     todoDiv.appendChild(todoLi);
  19.     //创建按钮
  20.     const todoButton = document.createElement('button');
  21.     todoButton.innerHTML = `<i class="fa-sharp fa-solid fa-trash trash"></i>`;
  22.     todoDiv.appendChild(todoButton);
  24.     //将所有内容附加到 todoLi
  26.     todoUl.appendChild(todoDiv);
  27. }

由于某种原因，它不起作用，我不知道为什么！
请帮助我，谢谢！

英文:

I am trying to create a javascript to-do list, but I am having a problem:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const inputEl = document.querySelector(&#39;form&#39;);    
  2. const buttonEl = document.querySelector(&#39;.todo-button&#39;);
  3. const todoUl = document.querySelector(&#39;.list&#39;);
  5. buttonEl.addEventListener(&#39;click&#39;, (addTodo)=&gt; {
  7. });
  9. function addTodo() {
  10.     //add div with class of &#39;todo&#39;
  11.     const todoDiv = document.createElement(&#39;div&#39;);
  12.     todoDiv.classList.add(&#39;todo&#39;)
  14.     //create li
  15.     const todoLi = document.createElement(&#39;li&#39;);
  16.     todoLi.innerText = inputEl.value;
  17.     todoDiv.appendChild(todoLi);
  19.     //create button
  20.     const todoButton = document.createElement(&#39;button&#39;);
  21.     todoButton.innerHTML = `&lt;i class=&quot;fa-sharp fa-solid fa-trash trash&quot;&gt;&lt;/i&gt;`;
  22.     todoDiv.appendChild(todoButton);
  24.     //append all to todoLi
  26.     todoUl.appendChild(todoDiv);
  27. }

<!-- end snippet -->

For some reason, it is not working and I do not know why!
Please help me, Thank you!

答案1

得分: 1

你应该将&lt;li&gt;元素添加到&lt;ul&gt;中，而不是&lt;div&gt;元素。

此外，你应该使用submit事件。这样，你可以通过在输入字段中按Enter键来触发添加操作。由于这是一个表单，你可以在提交时要求文本字段为必填项。表单输入的名称应该更具体一些；尝试使用task而不是input。

最后，addTodo函数应该只接受文本字符串。

以下是你提供的代码的翻译部分：

  1. const formEl = document.querySelector('form');
  2. const todoUl = document.querySelector('.list');
  3. const pendingSpan = document.querySelector('.pending');
  4. const clearBtn = document.querySelector('.clear');
  6. formEl.addEventListener('submit', (e) => {
  7.   e.preventDefault();
  8.   addTodo(e.target.elements.task.value.trim());
  9.   e.target.reset();
  10.   pendingSpan.textContent = todoUl.children.length;
  11. });
  13. todoUl.addEventListener('click', (e) => {
  14.   if (e.target.classList.contains('trash')) {
  15.     e.target.closest('.todo').remove();
  16.     pendingSpan.textContent = todoUl.children.length;
  17.   }
  18. });
  20. clearBtn.addEventListener('click', (e) => {
  21.   todoUl.innerHTML = '';
  22.   pendingSpan.textContent = '0';
  23. });
  25. function addTodo(text) {
  26.   // 添加带有类名'todo'的LI元素
  27.   const todoLi = document.createElement('li');
  28.   todoLi.classList.add('todo')
  30.   // 创建SPAN元素
  31.   const todoSpan = document.createElement('span');
  32.   todoSpan.innerText = text;
  33.   todoLi.appendChild(todoSpan);
  35.   // 创建按钮元素
  36.   const todoButton = document.createElement('button');
  37.   todoButton.innerHTML = `<i class="fa-sharp fa-solid fa-trash trash"></i>`;
  38.   todoLi.appendChild(todoButton);
  40.   // 将每个LI元素附加到UL元素
  41.   todoUl.appendChild(todoLi);
  42. }
  1. .todo > span {
  2.   display: inline-block;
  3.   min-width: 10em;
  4. }
  6. .todo > button > i.trash {
  7.   color: red;
  8. }
  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  2. <h1>Todo App</h1>
  3. <form autocomplete="off">
  4.   <input type="text" name="task" id="task" placeholder="输入任务..." required>
  5.   <button type="submit" class="todo-button"><i class="fa-solid fa-plus plus"></i></button>
  6. </form>
  7. <div class="todo-container">
  8.   <ul class="list">
  9.     <!--
  10.       <div class="todo">
  11.         <li>创建一些东西</li>
  12.         <button><i class="fa-sharp fa-solid fa-trash trash"></i></button>
  13.       </div>
  14.     -->
  15.   </ul>
  16. </div>
  18. <div class="todo-pending">
  19.   <p>你有<span class="pending">0</span>个待办任务</p>
  20.   <button class="clear">清除全部</button>
  21. </div>
英文:

You should add &lt;li&gt; elements to the &lt;ul&gt;, not &lt;div&gt; elements.

Also, you should use the submit event. This way you can trigger an add by pressing enter in the input field. Since this is a form, you can make the text required upon submission. This gives you free form validation. The name of the form input should be more specific; try task instead of input.

Finally, the addTodo function should only accept a text string.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const formEl = document.querySelector(&#39;form&#39;);
  2. const todoUl = document.querySelector(&#39;.list&#39;);
  3. const pendingSpan = document.querySelector(&#39;.pending&#39;);
  4. const clearBtn = document.querySelector(&#39;.clear&#39;);
  6. formEl.addEventListener(&#39;submit&#39;, (e) =&gt; {
  7.   e.preventDefault();
  8.   addTodo(e.target.elements.task.value.trim());
  9.   e.target.reset();
  10.   pendingSpan.textContent = todoUl.children.length;
  11. });
  13. todoUl.addEventListener(&#39;click&#39;, (e) =&gt; {
  14.   if (e.target.classList.contains(&#39;trash&#39;)) {
  15.     e.target.closest(&#39;.todo&#39;).remove();
  16.     pendingSpan.textContent = todoUl.children.length;
  17.   }
  18. });
  20. clearBtn.addEventListener(&#39;click&#39;, (e) =&gt; {
  21.   todoUl.innerHTML = &#39;&#39;;
  22.   pendingSpan.textContent = &#39;0&#39;;
  23. });
  25. function addTodo(text) {
  26.   // Add LI with class of &#39;todo&#39;
  27.   const todoLi = document.createElement(&#39;li&#39;);
  28.   todoLi.classList.add(&#39;todo&#39;)
  30.   // Create SPAN
  31.   const todoSpan = document.createElement(&#39;span&#39;);
  32.   todoSpan.innerText = text;
  33.   todoLi.appendChild(todoSpan);
  35.   // Create BUTTON
  36.   const todoButton = document.createElement(&#39;button&#39;);
  37.   todoButton.innerHTML = `&lt;i class=&quot;fa-sharp fa-solid fa-trash trash&quot;&gt;&lt;/i&gt;`;
  38.   todoLi.appendChild(todoButton);
  40.   // Append each LI to UL
  41.   todoUl.appendChild(todoLi);
  42. }

<!-- language: lang-css -->

  1. .todo &gt; span {
  2.   display: inline-block;
  3.   min-width: 10em;
  4. }
  6. .todo &gt; button &gt; i.trash {
  7.   color: red;
  8. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;h1&gt;Todo App&lt;/h1&gt;
  3. &lt;form autocomplete=&quot;off&quot;&gt;
  4.   &lt;input type=&quot;text&quot; name=&quot;task&quot; id=&quot;task&quot; placeholder=&quot;Enter a task...&quot; required&gt;
  5.   &lt;button type=&quot;submit&quot; class=&quot;todo-button&quot;&gt;&lt;i class=&quot;fa-solid fa-plus plus&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  6. &lt;/form&gt;
  7. &lt;div class=&quot;todo-container&quot;&gt;
  8.   &lt;ul class=&quot;list&quot;&gt;
  9.     &lt;!--
  10.       &lt;div class=&quot;todo&quot;&gt;
  11.         &lt;li&gt;Create something&lt;/li&gt;
  12.         &lt;button&gt;&lt;i class=&quot;fa-sharp fa-solid fa-trash trash&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  13.       &lt;/div&gt;
  14.     --&gt;
  15.   &lt;/ul&gt;
  16. &lt;/div&gt;
  18. &lt;div class=&quot;todo-pending&quot;&gt;
  19.   &lt;p&gt;You have &lt;span class=&quot;pending&quot;&gt;0&lt;/span&gt; pending task(s)&lt;/p&gt;
  20.   &lt;button class=&quot;clear&quot;&gt;Clear All&lt;/button&gt;
  21. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月10日 21:05:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76654050.html
  • javascript
  • todo
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定