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 Selecting Elements and Adding Events with JavaScript Perform: Event Handling

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
Posted by David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Uncaught TypeError: Cannot set property 'onclick' of undefined

I have seemed to be following the video the whole time (I think) but I come up with the error alert 

Uncaught TypeError: Cannot set property 'onclick' of undefined

This doesnt seem to make sense to me because onclick is a inherent js function?

Here is my HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">    

  </head>
  <body>
    <div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>

      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

      </ul>

      <h3>Completed</h3>
      <ul id="completed-tasks">
        <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
      </ul>
    </div>


    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

and more importantly here is my js

//problem: user interaction doesent provide desired results
//solution: add interactivity so the user can manage daily tasks


var taskInput = document.getElementById("new-task");
var addButton;
var incompleteTaskHolder = document.getElementById("incomplete-tasks");
var completedTaskHolder = document.getElementById("completed-tasks");
//Add a new task
var addTask = function() {
  console.log("Add task..")

    //when the button is pressed
    //create a new list item with the text from #new-task
    //input checkbox
    //label
 } 
//edit an exsisting task
var editTask = function() {
    console.log("Task edited")
}


//delete an existing task
var deleteTask = function() {
   console.log("Task deleted")
   //When the Delete button is pressed
    //Remove the parent list item from the ul
}


//mark a task as complete
var taskCompleted = function() {
    console.log("Task completed")
    //When the checkbox is checked
      //Append the task list item to the #completed-task
}



//mark a task as incomplete
var taskIncomplete = function() {
    console.log("Task Incomplete")
    //When the checkbox is unchecked
      //Append the task list item to the #incomplete-task
}

window.onload = function() {
//Set the click handler to the addTask function
addButton.onclick = addTask;
}

Of course the main problems come up at the bottom of this js file, where the 'onclick' undefined message comes from.....

Any help is appreciated.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, if this is a typing error , try to paste the original code form the video and then look for the differences so paste , undo paste undo so on till you find the mistake if you made . Hope this can help till other reply.

2 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

David,

This error isn't saying that "onclick" isn't defined, it's saying that what you're trying to call it on is currently undefined, which is true: you're calling it on "addButton", which is just a variable; it doesn't point to anything. You need to set "addButton" to hold a reference to an HTML element (say, a button) in order to call the onclick method on it.

Hope this helps!

Erik

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

I tried adding this to my js

var addButton = document.getElemebtById("newTaskButton");

and this to my HTML

<label for="new-task">Add Item</label><input id="new-task" type="text"><button id="newTaskButton">Add</button>

but when I type addButton into the console I just get and undefined response and also this error message

Uncaught TypeError: undefined is not a function

???

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

David,

I see a spelling mistake in your function call: you have ".getElemebtById", when it should be ".getElementById". Try correcting this and see what you get.

Erik

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

......I wish I was better at spelling....Thank you

Minh Le
PLUS
Minh Le
Courses Plus Student 4,264 Points
Minh Le
Minh Le
Courses Plus Student 4,264 Points

I have error for the below code: Please help. Uncaught TypeError: Cannot set property 'type' of undefined at scripts.js:25

// 6: Change all <input> elements from text fields to checkboxes const input = document.getElementsByTagName('input'); for (let i=0; input.length; i+=1) { input[i].type = 'checkbox'; }