Add button and delete buttons not working in to-do list page-CodePudding

I have worked on this to-do list page. I have created a button, for adding new tasks. Alongside each task in the list, I have put a delete button. The problem here is that when I click on them, it doesn't just work. If I try to add any new element and click on button, element does not get added in the list. Similarly, when I click on trash button beside the task I want to delete, it does not work. What should I do?

let inputElement = document.querySelector('input');
let formElement = document.querySelector('form');
let listElement = document.querySelector('ul');
let totalTasksElement = document.querySelector('#total-tasks');



let taskList = [
  'Report to office',
  'Exercise and have bath',
  'Eat lunch'

];

function deleteItem(e) {
  let task = e.parentElement.previousElementSibling.innerHTML;
  let index = taskList.indexOf(task);
  if (index !== -1) {
    taskList.splice(index, 1);
  }
  populateList();
}

function populateList() {
  taskList.forEach(function(item) {
    let newItem = document.createElement('li');
    let span = document.createElement('span');
    span.innerHTML = item;
    newItem.appendChild(span);

    let anchorElement = document.createElement('a');
    anchorElement.classList.add('delete');
    anchorElement.innerHTML = '<i ></i>';
    newItem.appendChild(anchorElement);

    anchorElement.addEventListener('click', (e) => deleteItem(e));

    listElement.appendChild(newItem);
  });
  totalTasksElement.innerHTML = taskList.length;

}
populateList();

function doesNotHaveWhiteSpace(s) {
  let stringWithoutSpace = s.trim();
  return stringWithoutSpace.length > 0;
}


function addTask() {
  if (inputElement.value && doesNotHaveWhiteSpace(inputElement.value) && !taskList.includes(inputElement.value)) {
    tasklist.push(imputElement.value);
    populateList();
  }
  inputElement.value = '';
}

formElement.addEventListener('submit', function(e) {
  e.preventDefault();
  addTask();
});

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
}

.container {
  background: linear-gradient(#76D7C4, #85C1E9);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.todo-list {
  background: white;
  display: flex;
  flex-direction: column;
  min-width: 400px;
  max-width: 600px;
  border-radius: 10px;
  height: 500px;
  box-shadow: 0px 0px 20px white;
}

.header {
  padding: 2em;
}

.header h1 {
  color: #566573;
  text-align: center;
}

.list {
  flex-grow: 1;
  padding: 2em;
  overflow-y: scroll;
}

.list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

list ul li {
  display: flex;
  justify-content: space-between;
  align-items: ednter;
  cursor: pointer;
}

list ul li i {
  cursor: pointer;
  color: #EF5350;
  padding: 1em;
}

list ul li i:hover {
  background: #F1F1F1;
}

.delete {
  cursor: pointer;
}

.add-task {
  padding: 2em;
  display: flex;
}

.add-task input {
  border: 1px solid #EEE;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  flex-grow: 1;
  padding: 1em;
  outline: none;
}

.add-task input:hover {
  border: 1px solid #DDD;
}

.add-task input:active {
  border: 1px solid #CCC;
}

.add-task input:focus {
  border: 1px solid #3498DB;
}

.add-task button {
  outline: none;
  border: none;
  padding: 1em;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #3498DB;
  color: white;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #CCC;
  border: 5px;
}

::-webkit-scrollbar-thumb {
  background: #544573;
  border-radius: 10px;
}

<script src="https://kit.fontawesome.com/2b070e02a1.js" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <h1><span id="total-tasks">0</span><span>Tasks</span></h1>
    </div>

    <div >
      <ul></ul>
    </div>
    <form >
      <input type="text">
      <button>
        <i ></i>
    </button>
    </form>
  </div>
</div>

CodePudding user response：

For addTask function, you have a typo here

tasklist.push(imputElement.value);

It should be taskList and inputElement

taskList.push(inputElement.value);

For deleteItem, you need to access your deleted element from i > a > li and then get span from li

let task = e.target.parentElement.parentElement.querySelector("span").innerHTML;

let inputElement = document.querySelector('input');
let formElement = document.querySelector('form');
let listElement = document.querySelector('ul');
let totalTasksElement = document.querySelector('#total-tasks');



let taskList = [
  'Report to office',
  'Exercise and have bath',
  'Eat lunch'

];

function deleteItem(e) {
  //2 parent nodes: i > a > li, and then get `span` from `li`
  let task = e.target.parentElement.parentElement.querySelector("span").innerHTML;
  let index = taskList.indexOf(task);
  if (index !== -1) {
    taskList.splice(index, 1);
  }
  populateList();
}

function populateList() {
  listElement.innerHTML = ""
  taskList.forEach(function(item) {
    let newItem = document.createElement('li');
    let span = document.createElement('span');
    span.innerHTML = item;
    newItem.appendChild(span);

    let anchorElement = document.createElement('a');
    anchorElement.classList.add('delete');
    anchorElement.innerHTML = '<i ></i>';
    newItem.appendChild(anchorElement);

    anchorElement.addEventListener('click', (e) => deleteItem(e));

    listElement.appendChild(newItem);
  });
  totalTasksElement.innerHTML = taskList.length;

}
populateList();

function doesNotHaveWhiteSpace(s) {
  let stringWithoutSpace = s.trim();
  return stringWithoutSpace.length > 0;
}


function addTask() {
  if (inputElement.value && doesNotHaveWhiteSpace(inputElement.value) && !taskList.includes(inputElement.value)) {
    taskList.push(inputElement.value);
    populateList();
  }
  inputElement.value = '';
}

formElement.addEventListener('submit', function(e) {
  e.preventDefault();
  addTask();
});

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
}

.container {
  background: linear-gradient(#76D7C4, #85C1E9);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.todo-list {
  background: white;
  display: flex;
  flex-direction: column;
  min-width: 400px;
  max-width: 600px;
  border-radius: 10px;
  height: 500px;
  box-shadow: 0px 0px 20px white;
}

.header {
  padding: 2em;
}

.header h1 {
  color: #566573;
  text-align: center;
}

.list {
  flex-grow: 1;
  padding: 2em;
  overflow-y: scroll;
}

.list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

list ul li {
  display: flex;
  justify-content: space-between;
  align-items: ednter;
  cursor: pointer;
}

list ul li i {
  cursor: pointer;
  color: #EF5350;
  padding: 1em;
}

list ul li i:hover {
  background: #F1F1F1;
}

.delete {
  cursor: pointer;
}

.add-task {
  padding: 2em;
  display: flex;
}

.add-task input {
  border: 1px solid #EEE;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  flex-grow: 1;
  padding: 1em;
  outline: none;
}

.add-task input:hover {
  border: 1px solid #DDD;
}

.add-task input:active {
  border: 1px solid #CCC;
}

.add-task input:focus {
  border: 1px solid #3498DB;
}

.add-task button {
  outline: none;
  border: none;
  padding: 1em;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #3498DB;
  color: white;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #CCC;
  border: 5px;
}

::-webkit-scrollbar-thumb {
  background: #544573;
  border-radius: 10px;
}

<script src="https://kit.fontawesome.com/2b070e02a1.js" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <h1><span id="total-tasks">0</span><span>Tasks</span></h1>
    </div>

    <div >
      <ul></ul>
    </div>
    <form >
      <input type="text">
      <button>
        <i ></i>
    </button>
    </form>
  </div>
</div>

CodePudding user response：

  let inputElement = document.querySelector('input');
    let formElement = document.querySelector('form');
    let listElement = document.querySelector('ul');
    let totalTasksElement = document.querySelector('#total-tasks');



    let taskList = [
        'Report to office',
        'Exercise and have bath',
        'Eat lunch'

    ];

    function deleteItem(e) {



        taskList.splice(e, 1);

        populateList();
    }

    function populateList() {
        var k = document.querySelectorAll(".z")
        k.forEach((e) => e.remove())
        taskList.forEach(function (item, index) {

            let newItem = document.createElement('li');
            newItem.className = 'z'
            let span = document.createElement('span');
            span.innerHTML = item;
            newItem.appendChild(span);

            let anchorElement = document.createElement('a');
            anchorElement.classList.add('delete');
            anchorElement.innerHTML = '<i ></i>';
            newItem.appendChild(anchorElement);

            anchorElement.addEventListener('click', () => {
                deleteItem(index)
            });

            listElement.appendChild(newItem);
        });
        totalTasksElement.innerHTML = taskList.length;

    }
    populateList();

    function doesNotHaveWhiteSpace(s) {
        let stringWithoutSpace = s.trim();
        return stringWithoutSpace.length > 0;
    }


    function addTask() {
        if (inputElement.value && doesNotHaveWhiteSpace(inputElement.value) && !taskList.includes(inputElement.value)) {
            tasklist.push(imputElement.value);
            populateList();
        }
        inputElement.value = '';
    }

    formElement.addEventListener('submit', function (e) {
        e.preventDefault();
        addTask();
    });