I want to create complete function of todo list in javascript-CodePudding

when user click on checkbox todo list background become blue text decoration on list paragraph is line-through how i can to do this using javascript

Javascript code

function createlist()
{
   document.getElementById("tolist").insertAdjacentHTML ("afterend",`<div id="todolistcontainer">
   <input type="checkbox" id="checkbox-list" onclick="complete()">  
   <p id="tasktodo"></p>
   <i  id="todoicon" onclick="deletelist()"></i>
   </div>`);
   document.getElementById("tasktodo").innerHTML=document.getElementById("input").value;

}
function deletelist()
{
    document.getElementById("todolistcontainer").remove();
}

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>To Do List JavaScript</title>
</head>
<body>
    <div >
       <input type="text" id="input" >
       <button id="button" onclick="createlist()">Add</button>
    </div>
    <div id="tolist"></div>
</body>
</html>

CSS code

@import url('https://fonts.googleapis.com/css2?family=Fira Code:wght@500&display=swap');
body{
    margin-left: 30%;
    margin-right: 30%;
    font-family:fira Code;
}
.container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    border: 5px solid black;
    width:100%;
    margin-bottom: 10px;
}
.container #input{
    border: 0px solid black;
    width:100%;
    margin: auto;
    font-size:40px;
    
}
.container #input:focus{
    outline:none;
}
.container #button{
    border: 0px solid black;
    width:30%;
    margin: auto;
    background-color: blue;
    color: white;
    height:100%;
    font-size:40px;
}
#todolistcontainer{
    border:1px solid black;
    width:80%;
    height: 100px;
    margin-top:12px;
    margin:auto;
    display: flex;
    flex-direction: row;
    margin-top: 12%;
}
#tasktodo{
    font-size:150%;
    width:30%;
    align-self: center;
    margin: auto;

}
#checkbox-list{
    width:8%;
}
#checkbox-list:checked{
   accent-color: blue;
}
#todoicon{
    display: flex;
    flex-direction: row;
    align-self: center;
    width:12%;
    font-size:50px;
}

MY todo-complete javascript function

function complete()
{

    if(document.getElementById("checkbox-list.parentNode").checked)
    {
        document.getElementById("tasktodo").style.textDecoration="line-through";
        document.getElementById("tasktodo").style.color="grey";
        document.getElementById("todolistcontainer").style.backgroundColor="blue";
    }
    else{
        document.getElementById("tasktodo").style.textDecoration="none";
        document.getElementById("tasktodo").style.color="black";
        document.getElementById("todolistcontainer").style.backgroundColor="white";
    }

}

But Output is not satisfied output screenshot

Kindly review my code I am learning html dom and got stuck at this project

CodePudding user response：

A few things to learn here:

You can't use ID's more than once. Everytime you were adding a todolist item, it was using the same ID and your code would only ever affect the first instance of those IDs. Instead, use classes.
Rather than use IDs and a whole bunch of 'getElementById', use relative paths. For example, you can send your complete() function a reference to the checkbox like this onclick="complete(this)". Then in your function, you can find the container using closest() like this: elem.closest('.todolistcontainer').
Finally, don't make your life hard by manually changing styles - instead use classes. A single class for your checked state would do the trick. Then you can just turn on and off the class based on the checkbox

function complete(elem) {
  let container = elem.closest('.todolistcontainer');
  if (elem.checked) container.classList.add('ischecked');
  else container.classList.remove('ischecked');
}


function createlist() {
  let todo = document.getElementById("input").value;
  document.getElementById("tolist").insertAdjacentHTML("afterend", `<div >
   <input type="checkbox" onclick="complete(this)">  
   <p >${todo}</p>
   <i   onclick="deletelist(this)"></i>
   </div>`);
}

function deletelist(elem) {
  elem.closest('.todolistcontainer').remove();
}

@import url('https://fonts.googleapis.com/css2?family=Fira Code:wght@500&display=swap');
body {
  margin-left: 30%;
  margin-right: 30%;
  font-family: fira Code;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 5px solid black;
  width: 100%;
  margin-bottom: 10px;
}

.container #input {
  border: 0px solid black;
  width: 100%;
  margin: auto;
  font-size: 40px;
}

.container #input:focus {
  outline: none;
}

.container #button {
  border: 0px solid black;
  width: 30%;
  margin: auto;
  background-color: blue;
  color: white;
  height: 100%;
  font-size: 40px;
}

.todolistcontainer {
  border: 1px solid black;
  width: 80%;
  height: 100px;
  margin-top: 12px;
  margin: auto;
  display: flex;
  flex-direction: row;
  margin-top: 12%;
}

.tasktodo {
  font-size: 150%;
  width: 30%;
  align-self: center;
  margin: auto;
}

.checkbox-list {
  width: 8%;
}

.checkbox-list:checked {
  accent-color: blue;
}

.todoicon {
  display: flex;
  flex-direction: row;
  align-self: center;
  width: 12%;
  font-size: 50px;
}


/* NEW CSS */

.todolistcontainer.ischecked .tasktodo {
  text-decoration: line-through;
  background: blue;
  color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
  <input type="text" id="input">
  <button id="button" onclick="createlist()">Add</button>
</div>
<div id="tolist"></div>

CodePudding user response：

Kinglish beat me to the punch - but I have one additional thing to add:

Instead of inline JS use event delegation on your list container to catch events from its child elements as they "bubble up" the DOM. You can then check to see if the element that fired the event was a button, check its checked status, and then use nextElementSibling to update the paragraph style.

const input = document.querySelector('input');
const list = document.querySelector('.tolist');
const add = document.querySelector('.add');

add.addEventListener('click', createList);
list.addEventListener('click', handleList);

function createList(e) {
  const html = `
    <div >
      <input type="checkbox" >  
      <p >${input.value}</p>
    </div>
  `;
  list.insertAdjacentHTML('beforeend', html);
}

function handleList(e) {
  if (e.target.matches('.checkbox')) {
    const { checked, nextElementSibling: nes } = e.target;
    if (checked) {
      nes.classList.add('strike');
      nes.closest('.todoContainer').classList.add('blue');
    } else {
      nes.classList.remove('strike');
      nes.closest('.todoContainer').classList.remove('blue');
    }
  }
}

@import url(https://fonts.googleapis.com/css2?family=Fira Code:wght@500&display=swap);.container,.container input{width:100%}.container .add,.container input{border:0 solid #000;margin:auto;font-size:30px}body{margin-left:30%;margin-right:30%;font-family:fira Code}.container{display:flex;flex-direction:row;justify-content:center;border:5px solid #000;margin-bottom:10px}.container .input:focus{outline:0}.container .add{width:30%;background-color:#00f;color:#fff;height:100%}.todoContainer{border:1px solid #000;width:80%;height:100px;margin:12% auto auto;display:flex;flex-direction:row}.tasktodo{font-size:150%;width:30%;align-self:center;margin:auto}.checkbox{width:8%}.checkbox:checked{accent-color:blue}

.checkbox:hover { cursor: pointer; }
.strike { text-decoration: line-through; color: grey; }
.blue { background-color: lightblue; }

<div >
  <input type="text">
  <button >Add</button>
</div>
<div ></div>