Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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
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

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 ;)