Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Appending and Removing Elements

Yuichi Narisawa
Yuichi Narisawa
19,548 Points
Posted by Yuichi Narisawa
Yuichi Narisawa
19,548 Points

Uncaught TypeError...

I can follow the previous tutorial, but I cannot for this one. After I append listItems, console starts to complain

"Uncaught TypeError: Cannot set property 'onclick' of null at bindTaskEvents (app.js:90) at app.js:106 bindTaskEvents @ app.js:90 (anonymous) @ app.js:106"

I don't understand why this happens. Please help!

here is my workspace snapshot. https://w.trhou.se/vtfjt1k0hk

1 Answer

Ashley Carpenter
Ashley Carpenter
13,393 Points
Ashley Carpenter
Ashley Carpenter
13,393 Points

Hi Yuichi,

It looks like your problem is because it can't find the edit button. You're trying to find an edit button with a class of edit but you didn't add an edit class when you created the button.

Try and add a class or Id to your edit button when you create it. I'll add a code example below shortly.

You'll also have the same issue with the rest of the fields.

Ashley

Ashley Carpenter
Ashley Carpenter
13,393 Points
Ashley Carpenter
Ashley Carpenter
13,393 Points 
var listItem = document.createElement("li");
    //input (checkbox)
    var checkBox = document.createElement("input");// checkbox
    //label
    var label = document.createElement("label");
    //input (text)
    var editInput = document.createElement("input"); // text
    //button.edit
    var editButton = document.createElement("button");
    edit button.addClass("edit"); // <------- here
    //button.delete
    var deleteButton = document.createElement("button");
Yuichi Narisawa
Yuichi Narisawa
19,548 Points
Yuichi Narisawa
Yuichi Narisawa
19,548 Points

Thank you for taking time to answering my question!

I carefully take a look at my code again, and find the problem! It was "()".

//Set the click handler to the addTask function addButton.onclick = addTask(); <- delete "()" : don't execute addTask function here!

Now it all works fine ;)