Vuejs Typeerror Cannot Read Property 'queryselector' of Undefined
Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to become support. Interact hither on code errors or bugs that yous need feedback on, or asking for an extra ready of eyes on your latest project. Bring together thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but not-students are welcome to scan our conversations.)
Looking to learn something new?
Treehouse offers a vii 24-hour interval free trial for new students. Get admission to thousands of hours of content and a supportive community. Start your gratuitous trial today.
"Uncaught Typeerror: Cannot read property 'querySelector of undefined"
Tin anyone help me
7 Answers
Hector F,
In your "for" loops you need to pass the alphabetize value "i", not the number "1". For case:
bindTaskEvents (incompleteTaskHolder.children[i], taskCompleted); The reason that yous are receiving the error is that when it tries to exercise the binding for the completeTaskHolder there is just 1 particular, and then the index would be "0". There is no item at index "1", therefore information technology is undefined.
Alleene Lacaba
That error ways that yous're using the querySelector() method on something other than the document or a valid DOM chemical element. Without seeing your code, we tin't help you lot effigy out the exact trouble though. Tin can you should your lawmaking?
Same trouble hither The console points to line 61 where the .querySelector's are in the local variables of "bindTaskEvents".
//Problem: User interaction doesn't provide desired results. //Solution: Add user interactivity and so the suer can manage daily tasks. var taskInput = document . getElementById ( "new-task" ); //new-chore var addButton = document . getElementsByTagName ( "button" )[ 0 ]; //starting time push button var incompleteTasksHolder = document . getElementById ( "incomplete-tasks" ); //incomplete-tasks var completedTasksHolder = document . getElementById ( "completed-tasks" ); //completed-tasks //Add a new task var addTask = part () { panel . log ( "Add task..." ) //When the button is pressed //Create a new list particular with the text from the #new-task: //input checkbox //label //input (text) //button.edit //push button.delete //Each elements, need modified and appended } //Edit an existing task var editTask = office () { console . log ( "Add task..." ) //When the Edit push button is pressed //if the course of the parent is .editMode //Switch from .editMode //label text become thge input'due south value //else //Switch to .editMode //input value becomes the label's text //Toggle .editMode on the parent } //Delete an existing task var deleteTask = function () { console . log ( "Add together task..." ) //When the Delete button is pressed //Remove the parent list item from the ul } //Marking a task as complete var taskCompleted = function () { panel . log ( "Add together task..." ) //When the Checkbox is checked //Suspend the task list detail to the #completed-task } //Mark a chore as incomplete var taskIncomplete = function () { panel . log ( "Add task..." ) //When the Checkbox is unchecked //Suspend the chore list detail to the #incompleted-task } var bindTaskEvents = function ( taskListItem , checkBoxEventHandler ) { console . log ( "Bind listing item events" ); //select taskListItem'southward children var checkBox = taskListItem . querySelector ( "input[type=checkbox]" ); var editButton = taskListItem . querySelector ( "button.edit" ); var deleteButton = taskListItem . querySelector ( "push.delete" ); //bind editTask to edit push editButton . onlcick = editTask ; //demark deleteTask to delete button deleteButton . onclick = deleteTask ; //bind checkBoxEventHandler to the checkbox checkBox . change = checkBoxEventHandler ; } //Prepare the click handler to the addTask role addButton . onclick = addTask ; //bike over incompleteTasksHolder ul list items for ( var i = 0 ; i < incompleteTasksHolder . children . length ; i ++ ) { //bind events to the list item'south children (taskCompleted) bindTaskEvents ( incompleteTasksHolder . children [ i ], taskCompleted ); } //wheel over completedTasksHolder ul list items for ( var i = 0 ; i < incompleteTasksHolder . children . length ; i ++ ) { //bind events to the list item's children (taskIncomplete) bindTaskEvents ( completedTasksHolder . children [ i ], taskIncomplete ); } Having fun with the course so far, just want this solved so I can move on. Much appreciated to anyone that can discover my problem
I'chiliad experiencing the same issue. "Uncaught TypeError: Cannot read property 'querySelector' of undefined VM90 custom.js:65" Please help!!
//Trouble: User interaction doesn't provide desired results. //Solution: Add together interactivty so the user can manage daily tasks. var taskInput = certificate.getElementById("new-job"); var addButton = document.getElementsByTagName("button")[0]; var incompleteTaskHolder = certificate.getElementById("incomplete-tasks"); var completeTaskHolder = certificate.getElementById("completed-tasks"); //Add a new chore var addTask = part () { console.log("...addTask..."); //When the button is pressed //Create a new list item with the text from #new-chore: //input (checkbox) //label //input (text) //button.edit //button.delete //Each elements, needs modified and appended } //Edit an existing task var editTask = part () { console.log("...editTask..."); //When the Edit push is pressed //if the class of the parent is .editMode //Switch from .editMode //label text become the input's value //else //Switch to .editMode //input value becomes the label'southward text //Toggle .editMode on the parent } //Delete an existing task var deleteTask = function () { console.log("...deleteTask..."); //When the Delete push button is pressed //Remove the parent list particular from the ul } //Mark a job equally complete var taskCompleted = office () { panel.log("...askComplete..."); //When the checkbox is checked //Append the task list item to the #completed-tasks } //Mark a chore as incomplete var taskIncomplete = role () { console.log("...taskIncomplete..."); //When the checkbox is unchecked //Append the chore listing item to the #incomplete-tasks } var bindTaskEvents = function (taskListItem, checkBoxEventHandler){ panel.log("bind list item events") //Selecct tastListItem's children var checkbox = taskListItem.querySelector("input[type=checkbox]"); var editButton = taskListItem.querySelector("button.edit"); var deleteButton = taskListItem.querySelector("push button.delete"); //bind editTask to edit button editButton.onclick = editTask; //bind deleteTask to delete button deleteButton.onclick = deleteTask; //bind deleteTask to delete button checkbox.onchange = checkBoxEventHandler; } //Gear up the clic handler to the addTask function addButton.onclick = addTask; for (var i = 0; i < incompleteTaskHolder.children.length ; i ++){ bindTaskEvents ( incompleteTaskHolder . children [ 1 ], taskCompleted ); } for ( var i = 0; i < completeTaskHolder . children . length ; i ++){ bindTaskEvents ( completeTaskHolder . children [ 1 ], taskIncomplete ); } ``` 
Having the same trouble......
I don't go why Andrew Chalkley 's lawmaking doesn't illicit the same error in the console when y'all opens up the To Do Listing in the browser.
I'm pretty sure my code is an exact replica as his as I've been following the tutorial precisely..
Any help is MUCH appreciated!
I accept i in the alphabetize, non 1, for the children and nevertheless getting an error. Trying to figure out how to post the code...
Did that and combed some more than this line from previous is still highlighted.
var checkBox = taskListItem.querySelector("input[blazon=checkbox]"); Source: https://teamtreehouse.com/community/uncaught-typeerror-cannot-read-property-queryselector-of-undefined
Enviar um comentário for "Vuejs Typeerror Cannot Read Property 'queryselector' of Undefined"