Trying to move completed tasks from one list to another

Question

Here we have a tab with incompled tasks and the list is supposed to be attached to the first tab(all-taks). After the task is finished it is supposed to get deleted from first list and move to second one with completed tasks. And after you switch to second tab, all the completed ones should be there. I can't figure out the way to do it. I hope I could get some help or some detailed explanation, 'cause I have been stuck on this for some time.

Here is an image for more clarification: [1]: https://i.stack.imgur.com/Dy0KL.png

HTML code:

<body>
    <div class="container">
        <header>
            <h1>To-Do List</h1>
            <h4>Describe your list...</h4>
        </header>

        <form action="" class="todo-form">
            <div class="form-wrapper">
                <!-- action is where files will be sent after submitting -->
                <input class="todo-input" type="text" placeholder="Add a task...">
            </div>
            <div class="form-wrapper">
                <button class="todo-button" type="submit">Add</button>
            </div>
    </form>

    <div class="todo-tabs">
        <ul>
            <li class="all-tasks active">
                <span></span>All tasks (<span class="counter">0</span>)</span>
            </li>
            <li class="completed">
                <span>Completed (<span class="counter">0</span>)</span>
            </li>
        </ul>
    </div>

    <div class="todo-list">
        <div class="tabs-content" data-tab="1">
            <ol class="undone-tasks"></ol>
        </div>
        <div class="tabs-content" data-tab="2">
            <ol class="done-tasks"></ol>
        </div>
    </div>
</body>

JS code:

//Selectors
const todoForm = document.querySelector('.todo-form');
const todoInput = document.querySelector('.todo-input');
const todoButton = document.querySelector('.todo-button');

const tabs = document.querySelectorAll('.todo-tabs ul li');
const tabWrap = document.querySelector('.todo-tabs ul');

const undone = document.querySelector('.undone-tasks');
const done = document.querySelectorAll('.done-tasks');

//Event Listeners
tabWrap.addEventListener('click', tabs)
todoButton.addEventListener('click', addToDo);

//Functions
tabs.forEach(function (tab, tab_index) {
    tab.addEventListener("click", function () {
        tabs.forEach(function (tab) {
            tab.classList.remove("active");
        })
        tabWrap.forEach(function (todoList, todoList_index) {
            if (todoList_index == tab_index) {
                todoList.style.display = "block";
            }
            else[
                todoList.style.display = "none"
            ]
        })
    })
})

function addToDo(event) {
    //Prevent form from submitting
    event.preventDefault();

    if (todoInput.value != "") {
        const todoDiv = document.createElement('div');
        todoDiv.classList.add('todo-div');

        const inputCheckbox = document.createElement('input');
        inputCheckbox.classList.add("checkbox-incompleted");
        inputCheckbox.setAttribute('type', 'checkbox');
        todoDiv.appendChild(inputCheckbox);

        //Create li
        const newToDo = document.createElement('li');
        newToDo.classList.add('todo-item');
        newToDo.insertAdjacentText("beforeend", todoInput.value);
        todoDiv.appendChild(newToDo);
        console.log(newToDo)

        //Append to list
        undone.appendChild(todoDiv);

        //Clear todo input value
        todoInput.value = "";

        //Focusing after 1st input
        todoInput.focus();
    }
}

The commented area is what i tried to do for tabs and lists to switch, but it gives the following error:

Uncaught TypeError: tabWrap.forEach is not a function
    at HTMLLIElement.<anonymous> (script.js:32:17)
(anonymous) @ script.js:32

The error starts at the beggining of the tabWrap.forEach function. But I guess there could be other way to solve this

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Anurag Srivastava, Feb 11 '22 at 08:07
@AnuragSrivastava I don't quite see that helping with moving li elements, correct me if i am wrong — viridiphile, Feb 11 '22 at 08:13
@AnuragSrivastava I edited the question, maybe this way it will be more clear — viridiphile, Feb 11 '22 at 08:20

score 0 · Answer 1 · answered Feb 11 '22 at 08:27

tabWrap is not useful for what you want: it is a single element. Instead, you'll want to iterate over the tab contents, which are identified by class tabs-content. It is those that you need to iterate and show or hide.

Then, to decide which contents to use, you may need to use that data-tab attribute you have in your HTML (not sure, since it is nowhere referenced).

Anyway, adapt as needed:

const tabContents = document.querySelectorAll('.tabs-content');
tabs.forEach(function (activeTab, activeIndex) {
    activeTab.addEventListener("click", function (e) {
        tabs.forEach(function (tab) {
            tab.classList.toggle("active", tab == activeTab);
        });
        tabContents.forEach(function (tabContent) {
            tabContent.style.display = tabContent.dataset.tab == activeIndex + 1 ? "" : "none";
        });
    })
})

score 0 · Answer 2 · answered Feb 11 '22 at 08:45

As @Anurag Srivastava pointed out on comment, in your code this is how you get tab elements:

const tabs = document.querySelectorAll('.todo-tabs ul li');
const tabWrap = document.querySelector('.todo-tabs ul');

The method querySelector returns a single element, and querySelectorAll returns an iterable collection.

And this is why you're getting the error:

Uncaught TypeError: tabWrap.forEach is not a function

If you don't have to support internet explorer you could take a look at Element.insertAdjacentElement() to move elements from one tab to another.

Trying to move completed tasks from one list to another

2 Answers2