我是 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>
onClick
处理程序,而不是 click
element.addEvenlistener('click')
代替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>