Kevin Powell - Community•2d ago

cannot set properties of null innerHTML

hi i have 2 problems in script.js of todo app which i learned from freecodecamp . the first one is when pressing (add) button while the input is empty it supposed to change the text of label of input via a (validation) simple if else statememnt combined with innerHTML but for some reason it consoled (cannot set properties of null innerHTML) . second when you enter a task and press add it appears but when you add the second task 2 tasks will appear . https://codepen.io/ilyas-draissia/pen/ogvWBZO

ilyas-draissia

CodePen

Todo app

...

15 Replies

ἔρως•2d ago

it seems to work in codepen so, my guess is that you have the script inside the <head> add the defer attribute to the script or, alternatively, listen to the load event on the window

ilyesOP•2d ago

The form validation doesn't work in codepen and with vscode liveserver it shows the cannot set properties of null error in console Plus try entering two tasks in a row ,3 tasks will appear .

ἔρως•2d ago

the element with id time doesn't exist

ilyesOP•2d ago

You're right i fixed it thnks but the other problem i didnt figure it out ,i saved it try refreshing so it show up on your pc

ἔρως•2d ago

line 32

    taskData.forEach(({id,text,date})=>{
        tasksContainer.innerHTML+=`
        <div class="task" id="${id}">
        <p>${text}</p>
        <p>${date}</p>
        <button>Edit</button>
        <button>Delete</button>
        </div>
        `
    });

    taskData.forEach(({id,text,date})=>{
        tasksContainer.innerHTML+=`
        <div class="task" id="${id}">
        <p>${text}</p>
        <p>${date}</p>
        <button>Edit</button>
        <button>Delete</button>
        </div>
        `
    });

you're adding all the taskData every single time (ignoring how horrible it is to use innerHTML for this) so, instead of this, just do this:

    tasksContainer.innerHTML+=`
        <div class="task" id="${taskObj.id}">
        <p>${taskObj.text}</p>
        <p>${taskObj.date}</p>
        <button>Edit</button>
        <button>Delete</button>
        </div>
    `;

    tasksContainer.innerHTML+=`
        <div class="task" id="${taskObj.id}">
        <p>${taskObj.text}</p>
        <p>${taskObj.date}</p>
        <button>Edit</button>
        <button>Delete</button>
        </div>
    `;

ilyesOP•2d ago

Thanks Instead of innerHTML what should I be using

ἔρως•21h ago

you should use this amazing tag: <template> then, when it's time to add stuff to the list, you do a deep clone of the contents, and manipulate everything you use it like a normal element then, you just append it to the list you should check the mdn page about the <template> tag

ilyesOP•17h ago

alright thanks

clevermissfox•17h ago

I love the <template> tag!! Just wanted to add that if all you need is a quick <p> tag or something you don’t need <template> for, you can use document.createElement(‘p’) But in the case above , you should def rely on template

ilyesOP•16h ago

I wonder if taskData.forEach(({id,text,date}) is a good code ?

ἔρως•15h ago

depends on the context where you were using it? YES, very bad because it was wrong somewhere else? depends

ilyesOP•15h ago

aaa i get it

ἔρως•15h ago

context is important

Jochem•15h ago

in isolation there's nothing wrong with that line though. It's the wrong line for the situation, but not inherently wrong to use in the proper situation

ἔρως•15h ago

exactly

Gaming

Programming

cannot set properties of null innerHTML