CODEWITHSUNDEEP
javascripthtmlbuttonicons
Coder99
Coder99

Reputation: 21

How to make the icons of button make work?

I have been trying to delete or check the button when the user clicks on button. It does work but when I click on icons of the buton it does not delete the list or check it if user click on check mark. So I have something like this:

<button> //here I actually have code if user clicks on it (check or delete mark button) it deletes or check it as task completed
     <span>
         <i></i> // here I have icons of delete and check mark
     </span>
 </button>

That gets created inside JavaScript code (as below) How can I apply the same for icons as it gets created later rather already having in my html. If you check my code it is:

icontainerforremove.className = "fas fa-trash-alt"; icontainer.className = "fas fa-check-circle";

They are the above two, I am not sure how to make it work if user clicks on the icons of button rather the button (it works on button click, but I have small icons inside button as check and bin - so delete it does not work when user clicks on those icons) I don't know how to add those functinality there as it gets created later inside javascript. If more explanation is needed please let me know. Any help is appreciated.

My code:

const todoInput = document.querySelector(".form-control");
const todoButton = document.querySelector(".add");
const todoList = document.querySelector(".todo-list");

document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);

function addTodo(event) {
  event.preventDefault();

  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo-item");

  const newTodo = document.createElement("h6");
  newTodo.innerText = todoInput.value;
  newTodo.classList.add("list-item-text");

  todoDiv.appendChild(newTodo);
  saveLocalTodos(todoInput.value);

  const removeButton = document.createElement("button");

  removeButton.classList =
    "remove btn btn-primary font-weight-bold float-right mt--20";
  changeColorRemove(removeButton);

  const spancontainerforremove = document.createElement("span");
  const icontainerforremove = document.createElement("i");

  icontainerforremove.className = "fas fa-trash-alt";


  spancontainerforremove.appendChild(icontainerforremove);
  removeButton.appendChild(spancontainerforremove);

  todoDiv.appendChild(removeButton);

  const completedButton = document.createElement("button");

  changeColor(completedButton);

  completedButton.classList =
    "complete btn btn-primary font-weight-bold float-right mr-1 mt--20";

  const spancontainer = document.createElement("span");
  const icontainer = document.createElement("i");

  icontainer.className = "fas fa-check-circle";

  spancontainer.appendChild(icontainer);
  completedButton.appendChild(spancontainer);

  todoDiv.appendChild(completedButton);

  todoList.appendChild(todoDiv);
  todoInput.value = "";
}

function deleteCheck(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove") || tgt.classList[0] ==="fas") {
    removeLocalTodos(tgt);
    tgt.closest("div").remove();
  } else if (tgt.classList[0] === "complete") {
    const todo = tgt.parentElement;
    todo.classList.toggle("completed");
    console.log(todo);
    tgt.closest("div").style.setProperty("text-decoration", "line-through");
    tgt.closest("div").style.setProperty("opacity", "0.2");
  }
}
function changeColor(completedButton) {
  completedButton.style.setProperty("background-color", "#41e141");
  completedButton.style.setProperty("border", " 1px solid #41e141");
}

function changeColorRemove(removeButton) {
  removeButton.style.setProperty("background-color", "#FF0000");
  removeButton.style.setProperty("border", " 1px solid #FF0000");
}

function saveLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }

  todos.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos));
}

function getTodos() {
  let todos;

  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  todos.forEach(function (todo) {
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo-item");

    const newTodo = document.createElement("h6");
    newTodo.innerText = todo;
    newTodo.classList.add("list-item-text");

    todoDiv.appendChild(newTodo);

    const removeButton = document.createElement("button");

    removeButton.classList =
      "remove btn btn-primary font-weight-bold float-right mt--20";
    changeColorRemove(removeButton);

    const spancontainerforremove = document.createElement("span");
    const icontainerforremove = document.createElement("i");

    icontainerforremove.className = "fas fa-trash-alt";

    spancontainerforremove.appendChild(icontainerforremove);
    removeButton.appendChild(spancontainerforremove);

    todoDiv.appendChild(removeButton);

    const completedButton = document.createElement("button");

    changeColor(completedButton);

    completedButton.classList =
      "complete btn btn-primary font-weight-bold float-right mr-1 mt--20";

    const spancontainer = document.createElement("span");
    const icontainer = document.createElement("i");

    icontainer.className = "fas fa-check-circle";

    spancontainer.appendChild(icontainer);
    completedButton.appendChild(spancontainer);

    todoDiv.appendChild(completedButton);

    todoList.appendChild(todoDiv);
  });
}

function removeLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  const todoIndex = todo.children[0].innerText;
  todos.splice(todos.indexOf(todoIndex), 1);
  localStorage.setItem("todos", JSON.stringify(todos));
}

Upvotes: 0

Views: 277

Answers (1)

qvotaxon
qvotaxon

Reputation: 369

The problem you're having has to do with the way you are using event binding. You are binding an eventHandler when loading your page. Though items added via your script aren't bound to the eventHandler.

You can fix this by either, binding your event handler to newly added items. Or use a delegate eventHandler, which will also bind to newly added elements.

Change your code to this:

function addTodo(event) {
    /* other code omitted for brevity */

    todoButton.addEventListener("click", addTodo);
    removeButton.addEventListener("click", deleteCheck);
}

Update

After understanding your question better, maybe you can try using this css rule: pointer-events: none;

The will make the element you put this rule on, click through. So you could style your i tags with this. And your click event should fall through to your button.

So:

<button> <-- let's say this has a click event
    My button <i class="fa fa-plus-sign"></i> <-- this has the css style pointer-events: none;
</button>

Clicking on the i tag (icon in this case), will make the click pass through the icon and onto the button. If I have understood you correctly, this should work.

Upvotes: 0

Related Questions