Javascript Question posted in
A very good W3school tutorial can be found here.

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

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>
Tags:

2

Answers


  1. 0
    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search