nodeList.style.display = 'flex' is not working

Question

i can't find the problem. I am just getting "Uncaught TypeError: Cannot set property 'display' of undefined" this error.

function filterTodo(e){
const todos = todoList.childNodes;
todos.forEach(function(todo){
    switch (e.target.value){
        case "all" :
            todo.style.display = 'flex';
            break;

        case "completed" :
            if(todo.classList.contains('completed')){
                todo.style.display = 'flex';
            }
            break;
    }
});

}

I think todo is not a dom element that we are expecting. Could you check todo using console.log()? — Showrin Barua, May 04 '21 at 20:27

score 2 · Accepted Answer · answered May 04 '21 at 20:30

2

childNodes includes all nodes, including text nodes (which don't have a style property.

Use children instead. That provides the child elements.

answered May 04 '21 at 20:30

Quentin

914,110
126
1,211
1,335

when i have used todoList.children then it is showing that todos.forEach is not a function :/ – Mahbub-E-Sobhani Himel May 04 '21 at 20:39
[Apply Array.from as per this question](https://stackoverflow.com/questions/15094886/why-is-foreach-not-working-for-children) – Quentin May 04 '21 at 20:41

score 0 · Answer 2 · answered May 04 '21 at 20:39

0

You can use property cahining here....

todo?.style?.display = 'flex'

What it does is it will check for the property first. If it finds the exact property then assigns the value otherwise skips.

answered May 04 '21 at 20:39

Showrin Barua

1,737
1
11
22

Uncaught SyntaxError: Invalid left-hand side in assignment showing this error now – Mahbub-E-Sobhani Himel May 04 '21 at 20:43
then you can use this ---> if (todo.style.display) todo.style.display = 'flex'; – Showrin Barua May 04 '21 at 20:50

nodeList.style.display = 'flex' is not working

2 Answers2