如何附加带有复选框属性的输入元素？

Question

我是 JavaScript 新手，正在尝试创建一个待办事项列表。如何将带有复选框属性的输入附加到我的代码中，以便在完成后可以检查段落？

下面是我的代码：

// ! DOM ELEMENTS

const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');


// ! ADD TASK

function addTask() {
  if (taskInput.value === '') {
    alert('Oh no... You have not written anything?');
  } else {
    let paragraph = document.createElement('p');
    paragraph.textContent = taskInput.value;
    taskList.appendChild(paragraph);
    saveTasks();
  }

  taskInput.value = '';
}

<div class="container">
  <h1>TO DO LIST</h1>

  <input type="text" id="taskInput" placeholder="ENTER TASK HERE!">

  <button id="addButton" click="addTask()">ADD</button>

  <div id="taskList">
  </div>

  <p> lorem 10</p>

</div>

Answer 1

1. 按钮应该有一个

   onClick

   处理程序，而不是

   click

   • 更好的是使用

     element.addEvenlistener('click')

     代替
2. 使用相同的

   document.createElement

   制作

   input

   ，您可以在

   appendChild

   上

   paragraph

// ! DOM ELEMENTS
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
const addButton = document.getElementById('addButton');

// ! EVENT LISTENERS
addButton.addEventListener('click', addTask);

// ! ADD TASK

function addTask(e) {
    if (taskInput.value === '') {
        alert('Oh no... You have not written anything?');
    } else {
        let paragraph = document.createElement('p');
        paragraph.textContent = taskInput.value;
        
        let checkbox = document.createElement('input');
        checkbox.type = 'checkbox'
        paragraph.appendChild(checkbox);
        
        taskList.appendChild(paragraph);
    }

    taskInput.value = '';
}

<div class="container">
    <h1>TO DO LIST</h1>

    <input type="text" id="taskInput" placeholder="ENTER TASK HERE!">

    <button id="addButton">ADD</button>

    <div id="taskList">div>
</div>