Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – When I click a button my style dosen't work at all

when i click button for example(remove btn or add btn), the selected style dosen’t work at all???

i think somthing went wrong in renderList function but i can’t find it.
i check other lines and i don’t find the my mistake

const inputEl = document.getElementById("input-item");
const addBtn = document.querySelector(".add-btn");

let lists = [];

const renderList = () => {
  const listContainer = document.querySelector(".list-container");
  listContainer.innerHTML = "";

  lists.forEach((item) => {
    const liContainer = document.createElement("li");
    liContainer.setAttribute("id", item.id);
    liContainer.classList.add("list", item.selected ? "selceted" : "not");

    const listName = document.createElement("p");
    listName.innerText = item.name;
    listName.addEventListener("click", () => markSelected(item.id));

    const iconBtn = document.createElement("img");
    iconBtn.setAttribute("src", "/icons/close-square-svgrepo-com.svg");
    iconBtn.addEventListener("click", () => deletList(item.id));

    liContainer.appendChild(listName);
    liContainer.appendChild(iconBtn);
    listContainer.appendChild(liContainer);
  });
};

const addList = () => {
  const inputVal = inputEl.value;
  let list;

  if (inputVal.trim() !== "") {
    list = {
      id: Date.now(),
      name: inputVal,
      selected: false,
    };
  }

  inputEl.value = "";
  lists.push(list);
  renderList();

  console.log(lists);
};

addBtn.addEventListener("click", (e) => {
  addList();
});

const deletList = (id) => {
  lists = lists.filter((list) => list.id !== id);
  renderList();
};

const markSelected = (id) => {
  lists = lists.map((list) => {
    if (list.id === id) {
      list.selected = !list.selected;
    }

    return list;
  });
  updateList(id);
};

const updateList = (id) => {
  const listElement = document.getElementById(id);
  if (listElement) {
    const task = lists.find((item) => item.id === id);
    if (task.selected) {
      listElement.classList.add("selected");
    } else {
      listElement.classList.add("selected");
    }
  }
};

renderList();

repo: https://github.com/MahzyarSaadat/todo-list/tree/main

try me to find the solution

Tags:

2

Answers


  1. 0

    Stop declaring identifiers intended to be VARIABLES, as constants or you won’t be able to modify them.

    For example, you’ve got…

    const listName = document.createElement("p");
    listName.innerText = item.name;

    A constant means it CAN NEVER AND WILL NEVER CHANGE VALUE during its usage.

    Constant declarations are useful for PRE-SET things like the days of the week, or the months of the year, which never change.

    Constants are great for O/S memory management because the O/S knows the identifier will never grow or shrink in memory size (remains fixed), so it is moved to the top of the code segment and the O/S doesn’t have to worry about it any more.

    So don’t declare an identifier as a constant if you plan to set its value after the declaration.

    Btw, look in your debug console… you should see tons of errors informing that you can’t change a constant.

    Login or Signup to reply.
  2. 0

    It is quite helpful if you create a sandbox example that people can test/reproduce.

    The issue is most likly to do with your css / styles.
    When you are adding the ‘selected’ class with

    liContainer.classList.add("list", item.selected ? "selceted" : "not");

    it is actually adding two space separated class’s list selected or list not.
    To add a style to a space-separated class, you need to set up .list.not and .list.selected classes in a style sheet.

    here is a sandbox to your code with an example css class setup to show that it is actualy working. (Note the close-square-svgrepo-com image wont work in the sandbox)

    Note that the onclick is only on the p tag (only the text, not the entire row). If you want the entire row to be clickable, you will need to change the component you attach the onClick to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search