ToDoList personal project - Issue with create checkbox dynamically

1

Hi coders,
I’m continuing to create my ToDo List project and as I have written in title I have a problem with create checkbox dynamically.

I followed this thread on Stackoverflow:


but when I clicked on button, the event didn’t work and if I don’t add nothing , it creates checkbox with value “undefined”
Can you help me?
(this is the link on Codepen: https://codepen.io/camilco/pen/OJPLywM)
Thanks,
CamiCode

2

Always remember one thing when using jquery .
you need to call $(document).ready() function i.e.

$(document).ready(function(){
   //your jquery code should be inside this function
})

try this will solve your problem

3

  1. You didn’t close the ul in the HTML correctly.

  2. You have two on click handlers. Remove the outer plain JS one and just use the jQuery handler.

  3. Move the two lines of code before the handler into the jQuery handler, you can also get rid of the plain JS selectors and use jQuery inside the click handler instead.

  4. You are not selecting the #box element because you forgot the hash (#) in front of it (you have $('box') should be $('#box')). Remember the jQuery selector works like querySelector/querySelectorAll and needs the type identifier in front of the selector string.

//Counter task --> add button
let count = 0;
$("#counter-button").on("click", function(e) {
  count = count + 1;
  $("#counter-task").html(count + " Tasks");
  $("#list").append("<li><input type='checkbox'>" + $("#box").val() + "</li>");
});