How do I append an input element with an attribute of checkbox?

Question

I am new to JavaScript and attempting to create a to-do list. How can I append an input with a checkbox attribute to my code so that paragraphs can be checked off once completed?

Here is my code below:

// ! 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

You're close but a bit of work needed here. For example let's break this down to show how you can switch up things like your on click to event listener.

// ... (your existing DOM elements code)

function addTask() {
  if (taskInput.value === '') {
    alert('Oh no... You have not written anything?');
  } else {
    // Create a paragraph to hold the task text
    let paragraph = document.createElement('p');
    paragraph.textContent = taskInput.value;

    // Create the checkbox 
    let checkbox = document.createElement('input');
    checkbox.type = 'checkbox';

    // Add the checkbox BEFORE the text within the paragraph
    paragraph.prepend(checkbox); 

    // Add the whole paragraph to the task list
    taskList.appendChild(paragraph);

    // Clear the input field
    taskInput.value = '';
  }
}

• checkbox.type = 'checkbox': This line creates an input element and sets its type to "checkbox," which is what creates the clickable box.
• paragraph.prepend(checkbox): This is key! We use prepend to insert the checkbox at the beginning of our paragraph, ensuring it appears before the task text.

A minor change to the buttons too:

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

To the more common:

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

Note that we've removed the inline onclick and instead added the addEventListener in your JavaScript code earlier. These changes mean each new task will have a checkbox at the beginning of its line. And you can click the checkboxes to mark tasks as completed.

Answer 2

1. The button should have a onClick handler, not a click
   • Even better is to use element.addEventListener('click') instead
2. Use the same document.createElement to make an input which you can appendChild on the 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>