CODEWITHSUNDEEP
javascripthtml
sleepy_daze
sleepy_daze

Reputation: 551

Creating a to-do list

I'm creating a todo list, but I'm running into one issue. I've successfully set up the todo list so that the user can add items. However, the issue comes into play when clicking a link to remove the item.

When you click on the x to remove the item, it doesn't remove that item, but instead removes the item before it. For some reason, the remove function seems to always capture the id of the item before the one you click on.

The relevant JS:

function listTodos() {
    var items = storeTodos();

    var html = '<ul>';
    for (i = 0; i < items.length; i++){
      html += '<li><span class="todoItem">' + items[i] + '</span><a href="#" class="deleteItems"> x</a>' + '</li>';
    };
    html += '</ul>';

    document.getElementById('items').innerHTML = html;
    var todoItem = document.getElementsByClassName('todoItem');

    // loop through all items in the array and add the event listener
    for (i = 0; i < todoItem.length; i++) {
      var clicked = false;
      todoItem[i].addEventListener('click', clickhandler);
      // Set id to uniquely identify each todo item
      todoItem[i].id = 'todoItem-' + i;
      id = todoItem[i].id;
    }
  
    // Function to remove todo items if "x" is clicked
      var deleteItems = document.getElementsByClassName('deleteItems');
      for (i = 0; i < deleteItems.length; i++) {
        deleteItems[i].addEventListener('click', remove);
      };
}

function remove(deleteItems) {
  var clicked = true;
  if (clicked) {
    console.log(id);
    var todos = storeTodos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
    listTodos();
    return false;
  }
}
  <div id="wrapper">
      <form id="createList">
        <input id="entry"><button id="add">Add a Task</button>
      </form>

      <div id="items"></div>
    </div>
    <script src="js/todo.js"></script>

Please note that I didn't include the first clickhandler since that is related to the strikethrough element of my todo list. It's also worth noting that the todo items are stored in an array and I am using localStorage.

Thanks for any help!

Edit: Here's the add function if that helps (it's located above the listTodos function):

document.getElementById('add').addEventListener('click', add);

function add() {
  var task = document.getElementById('entry').value;
    if(task != ''){
      var items = storeTodos();
      items.push(task);
      localStorage.setItem('todo', JSON.stringify(items));

      listTodos();
      document.getElementById('createList').reset();
      return false;
    }

    return false;
}

Upvotes: 0

Views: 3328

Answers (1)

adamj
adamj

Reputation: 4782

Here's one way of doing it: https://jsfiddle.net/hxgn6bd4/

Please be aware, I have removed all localStorage code, as to simplify things (you can reimplement this on your end). And I've removed any references to functions which you did not include in the above description.

HTML

<input id="entry"><button id="add">Add a Task</button>
<div id="items"></div>

JavaScript

var items = [];

function listTodos() {
    var html = '<ul>';
    for (i = 0; i < items.length; i++){
      html += '<li><span class="todoItem">' + items[i] + '</span><a href="#" class="deleteItem"> x</a>' + '</li>';
    };
    html += '</ul>';

    document.getElementById('items').innerHTML = html;
    var todoItem = document.getElementsByClassName('todoItem');

    // loop through all items in the array and add the event listener
    for (i = 0; i < todoItem.length; i++) {
      // Set id to uniquely identify each todo item
      todoItem[i].id = 'todoItem-' + i;
      id = todoItem[i].id;
    }

    // Function to remove todo items if "x" is clicked
      var deleteItems = document.getElementsByClassName('deleteItem');
      for (i = 0; i < deleteItems.length; i++) {
        deleteItems[i].id = i;
        deleteItems[i].addEventListener('click', remove);
      };
}

function remove(event) {
    items.splice(event.target.id, 1);
    listTodos();
    return false;
}

document.getElementById('add').addEventListener('click', add);

function add() {
  var task = document.getElementById('entry').value;
    if(task != ''){
      items.push(task);
      listTodos();
      return false;
    }

    return false;
}

Upvotes: 1

Related Questions