How to add value of input text next to checkbox value in list? And how to add onclick property to the input element

I'm trying to create a to-do list. I created a JavaScript code that appends the HTML tags in the list container. But how can I add the onclick property and text value of the input text next to the input checkbox?

<div id="to-do-list-container">
 <h3>To do List</h3>
 <ul id="list-items">
  <li>
   <div>
    <input type="checkbox" class="list-item-checkbox" onclick="Check_item()">Item 1</input>
   </div>
  </li>
  <li>
   <div>
    <input type="checkbox" class="list-item-checkbox" onclick="Check_item()">Item 2</input>
   </div>
  </li>
  <li>
   <div>
    <input type="checkbox" class="list-item-checkbox" onclick="Check_item()">Item 3</input>
   </div>
  </li>
 </ul>
 <form action="javascript:void(0);">
  <input type="text" id="list-item-input" placeholder="Enter item...">
  <input type="submit" value="ADD" onclick="Add_item()">
 </form>
</div>

function Add_item() {
 var listItem = document.createElement("li");
 var container = document.createElement("div");
 var checkbox = document.createElement("input");
 var itemName = document.getElementById("list-item-input");

 itemName.value = "";

 checkbox.type = "checkbox";
 checkbox.className = "list-item-checkbox";

 document.getElementById("list-items").appendChild(listItem);
 listItem.appendChild(container);
 container.appendChild(checkbox);
 checkbox.appendChild(itemName.value);
};

so, if i understand, you should modify the code as follow:

function Add_item() {
  var listItem = document.createElement("li");
  var container = document.createElement("div");
  var checkbox = document.createElement("input");
  var itemName = document.getElementById("list-item-input").value; // Get the value of the input text

  var label = document.createElement("label"); // Create a label element for the checkbox text
  label.textContent = itemName; // Set the text content of the label to the input value

  itemName = ""; // Clear the input text after using its value

  checkbox.type = "checkbox";
  checkbox.className = "list-item-checkbox";
  checkbox.onclick = Check_item; // Set the onclick property of the checkbox

  document.getElementById("list-items").appendChild(listItem);
  listItem.appendChild(container);
  container.appendChild(checkbox);
  container.appendChild(label); // Append label after the checkbox
};

In this modified version of Add_item(), a new element is created to hold the input text value and we set its textContent to the value of itemName. After using the itemName value, we delete it by setting it to an empty string to prepare for the next element input.

Note also that we assign the checkbox's onclick property to the Check_item() function, to ensure that the function is executed when the checkbox is clicked.

You can use Element#append, which can insert text nodes. Moreover, you should set itemName.value to an empty string only after adding the string to the container.

addEventListener can be used to add the click listener.

container.append(checkbox, itemName.value);
itemName.value = "";
checkbox.addEventListener('click', Check_item);

With regard to the main point you should always be including a <label> element with <input> elements. You can remove the <div> element as it's not necessary, and it makes your markup a little cleaner.

Further:

1. You should remove the inline JS and use addEventListener to attach listeners to elements that you pick up with DOM methods like querySelector. For example you can attach one listener to the list element and have that catch events from its children (event delegation) as they "bubble up" the DOM.

2. Rather than using createElement and append to add item elements to the list you can use a template string to create a string of HTML which you can then add to the list element.

3. Using classList you can add/remove classes to specific elements that you've declared in your CSS file.

4. Since input elements don't require a corresponding form element, and you're not submitting the form in your example, you can remove it.

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

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

// Grab the list element, and the button element
const list = document.querySelector('.list');
const addBtn = document.querySelector('.form > button');
// Add a listener to the list element that calls `handleDone`
// and a listener to the button element that calls `handleAdd`
list.addEventListener('click', handleDone);
addBtn.addEventListener('click', handleAdd);
// When the list element "catches" an event from one of its
// child elements it first checks to see if its a checkbox.
// If it is it grabs the closest list element (ie the parent),
// and then either adds/removes the strike class from it
function handleDone(e) {
if (e.target.matches('[type="checkbox"]')) {
const parent = e.target.closest('li');
if (e.target.checked) {
parent.classList.add('strike');
} else {
parent.classList.remove('strike');
}
}
}
// When the button is clicked it grabs the value from
// the input element (its previousElementSibling), and then
// constructs some HTML using a template string using the value
// It then adds that HTML to the list element using `insertAdjacentHTML`
function handleAdd() {
const { value } = this.previousElementSibling;
const html = `
<li>
<label>
<input value="${value}" type="checkbox">
${value}
</label>
</li>
`;
list.insertAdjacentHTML('beforeend', html);
}

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

.strike { text-decoration: line-through; }
.strike label { opacity: 0.7 }; 

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

<section>
<h3>To do List</h3>
<ul class="list">
<li>
<label>
<input value="Item 1" type="checkbox">
Item 1
</label>
</li>
<li>
<label>
<input value="Item 2" type="checkbox">
Item 2
</label>
</li>
<li>
<label>
<input value="Item 3" type="checkbox">
Item 3
</label>
</li>
</ul>
<section class="form">
<input type="text" placeholder="Enter item...">
<button type="button">Add item</button>
</section>
</section>

<!-- end snippet -->

Additional documenation

• closest
• insertAdjacentHTML
• previousElementSibling