Setting and unsetting element style, with clicks-CodePudding

So, I'm trying to make some sort of task list.

I append list items by pressing the enter button and by filling in an input.

I now want to add a feature, by which, whenever I click on a task, it gets marked with a line, and then with a follow-up click the line gets removed. This should be done repeatedly.

However, with my code, I can only do that once per list item. So, after I remove the line, I can't click on it and reapply the line style and then do it all over again.

I am guessing this block of code has to be outside, as a separate block of code.

const things = document.querySelector('#things');
things.addEventListener("keyup", function(event) {
  const li = document.createElement("li");
  if (event.keyCode === 13) {
    li.innerHTML = things.value;
    document.querySelector("#list").appendChild(li);
    // txtInput.value = "";
  }
  li.addEventListener("click", function() {
    li.setAttribute("style", "text-decoration: line-through");
    li.addEventListener("click", function() {
      li.setAttribute("style", "text-decoration: none");
    });
  });
});

<body>
  <div>
    <input id="things">
    <ul id="list">
    </ul>
  </div>
</body>

(using class(commented))

const things = document.querySelector('#things');
things.addEventListener("keyup", function(event) {
  const li = document.createElement("li");
  if (event.keyCode === 13) {
    li.innerHTML = things.value;
    document.querySelector("#list").appendChild(li);
    // txtInput.value = "";
  }
  li.addEventListener("click", function() {
    li.setAttribute("style", "text-decoration: line-through");
    li.addEventListener("click", function() {
      li.setAttribute("style", "text-decoration: none");
    });
  });

  /* li.addEventListener("click", function() {
      li.classList.add("lt");
      li.addEventListener("click", function() {
          li.classList.remove("lt");
      });
  }); */
});

li.lt {
  text-decoration: line-through;
}

<body>
  <div>
    <input id="things">
    <ul id="list">
    </ul>
  </div>
</body>

CodePudding user response：

Replace this html code:

li.addEventListener("click", function() {
        li.setAttribute("style","text-decoration: line-through");
        li.addEventListener("click", function() {
            li.setAttribute("style","text-decoration: none");
        });
    });

By this code

li.addEventListener("click", function() {
    li.classList.toggle('done');
    });

and in you CSS add a class

 .done{
     text-decoration:line-through;
   }

CodePudding user response：

Add a class in your css that toggles the line-through. In your javascript, toggle the class on click.

const things=document.querySelector('#things');
things.addEventListener("keyup", function(event) {
    const li = document.createElement("li");
    if(event.keyCode === 13){
        li.innerHTML = things.value;
        document.querySelector("#list").appendChild(li);
        li.addEventListener("click", function() {
          if(li.classList.contains("line-through")){
            li.classList.remove("line-through")
          }
          else{
            li.classList.add("line-through")
          }
        });
    } 
});

.line-through{
     text-decoration: line-through

}

<body>
  <div>
    <input id="things"/>
    <ul id="list">
    </ul>
    </div>
</body>

CodePudding user response：

Update your js code to:

const things=document.querySelector('#things');
things.addEventListener("keyup", function(event) {
    const li = document.createElement("li");

    if(event.keyCode === 13){
        li.innerHTML = things.value;
        document.querySelector("#list").appendChild(li);
    } 
    
    li.addEventListener("click", function() {
    
      if(li.classList.contains('has-line'))  {
             li.setAttribute("style","text-decoration: none");
             li.classList.remove('has-line');
      }else {
             li.setAttribute("style","text-decoration: line-through");
             li.classList.add( 'has-line');
      }          
    });
});