Question 221022 in Html Question posted in
Some basic documentation can be found here.

Html – Click event for list elements in javascript

I’m doing a todo app. I have a ul in my html side and im adding lists with javascript to this unordered list. My goal is when i clicked any todo first time, that should be style of line-through and when i clicked "styled" todo, it should be removed. But this code cant get this. In this code, when i styled any list, if i click another one, it removes on the page. But i dont want it that way. It shouldnt be removed, it should be styled with "line-through"
Thank you for your help.

const todoInput = document.getElementById("todoText");
const submitTodo = document.getElementById("submitTodo");
submitTodo.addEventListener("click", addTodo);
const todosList = document.getElementById("todos_list");

function addTodo() {
  if (todoInput.value === "") {
    alert("You must write Something!!");
  } else {
    let li = document.createElement("li");
    li.innerHTML = todoInput.value;
    todosList.appendChild(li);
    todoInput.value = "";
  }
}

document.addEventListener("DOMContentLoaded", function () {
  var clickCount = 0;
  todosList.addEventListener("click", function (e) {
    clickCount++;
    var clickedTodo = e.target;

    if (clickCount === 1) {
      firstClick();
      console.log(clickCount);
    } else if (clickCount === 2) {
      SecondClick();
      clickCount = 0;
    }

    function firstClick() {
      clickedTodo.style.textDecoration = "line-through";
    }
    function SecondClick() {
      clickedTodo.remove();
    }
  });
});

I tried adding a counter and counting mouseclicks, adding an id to the added lists but not worked

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    document.addEventListener("DOMContentLoaded", function () {
  todosList.addEventListener("click", function (e) {
    var clickedTodo = e.target;
    if (clickedTodo.classList.contains("clicked") === false) {
      firstClick();
    } else {
      secondClick();
    }

    function firstClick() {
      clickedTodo.style.textDecoration = "line-through";
      clickedTodo.classList.add("clicked");
    }
    function secondClick() {
      clickedTodo.remove();
    }
  });
});

  2. 0

    if i click another one, it removes on the page. But i dont want it that way. It shouldnt be removed

    Then why does your function explicitly remove an element?

    clickedTodo.remove();

    just replace it with

    clickedTodo.style.textDecoration = "line-through";

    or maybe if you want this function to act as a toggle you could remove the line through

    if (clickedTodo.style.textDecoration === "line-through") {
  clickedTodo.style.textDecoration = "none";
}
    Login or Signup to reply.
  3. 0

    It seems like you are trying to toggle the "line-through" style on the todo items by clicking on them
    I think this code will help you

    const todoInput = document.getElementById("todoText");
const submitTodo = document.getElementById("submitTodo");
submitTodo.addEventListener("click", addTodo);
const todosList = document.getElementById("todos_list");

function addTodo() {
  if (todoInput.value === "") {
    alert("You must write Something!!");
  } else {
    let li = document.createElement("li");
    li.innerHTML = todoInput.value;
    todosList.appendChild(li);
    todoInput.value = "";

    // Add a click event listener to the new todo item
    li.addEventListener("click", toggleTodoStyle);
  }
}

function toggleTodoStyle(e) {
  const clickedTodo = e.target;
  if (clickedTodo.style.textDecoration === "line-through") {
    clickedTodo.style.textDecoration = "none"; // Remove "line-through" style
  } else {
    clickedTodo.style.textDecoration = "line-through"; // Add "line-through" style
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search