javascript - Uncaught TypeError: Cannot read property 'querySelector' of undefined - Stack Overflow

admin管理员组

文章数量:1342522

Could you help me, please? When I run this, I get "Uncaught TypeError: Cannot read property 'querySelector' of undefined" in the 'bindTaskEvents' function where the function deals with the "pletedTasksHolder" list. Trying this in the console:

console.log(pletedTasksHolder.children[0]) 

returns the only li just fine.

var taskInput = document.getElementById("new-task"); // new-task
var addButton = document.getElementsByTagName("button")[0]; // first button
var inpleteTasksHolder = document.getElementById("inplete-tasks"); // ul#inplete-tasks
var pletedTasksHolder = document.getElementById("pleted-tasks"); // ul#pleted-tasks

// Add a new task
var addTask = function(){
    console.log("Add task...");
}
// Edit an existing task
var editTask = function() {
    console.log("Edit task...");
}

var deleteTask = function() {
    console.log("Delete task...");
// Delete an existing task

    // When the Delete button is pressed
        // Remove the parent li from the ul
}

var taskCompleted = function() {
    console.log("Complete task...");
// Mark a task as plete
    // When the checkbox is checked
        // Append the task li to the #pleted-tasks
}

// Mark a task as inplete
var taskInplete = function() {
    console.log("Inplete task...");
    // When the checkbox is unchecked
        // Append the task li to the #inplete-tasks
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
    console.log("Bind li events");
    // select li's children
    var checkbox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");

    // bind editTask to editButton
    editButton.onclick = editTask;

    //  bind deleteTask to deleteButton;
    deleteButton.onclick = deleteTask;

    // bind checkBoxEventHandler to checkbox
    checkbox.onchange = checkBoxEventHandler;
}

// Set the click handler to the addTask function
addButton.onclick = addTask;

// Cycle over inpleteTasksHiolder ul list items
for (var i = 0; inpleteTasksHolder.children.length; i++) {
        // bind events to li' children (taskCompleted)
    bindTaskEvents(inpleteTasksHolder.children[i], taskCompleted);
}     

// Cycle over pletedTasksHiolder ul list items

for (var i = 0; pletedTasksHolder.children.length; i++) {
        // bind events to li' children (taskCompleted)
    bindTaskEvents(pletedTasksHolder.children[i], taskInplete);
}     

What can be wrong here? Thanks!

Could you help me, please? When I run this, I get "Uncaught TypeError: Cannot read property 'querySelector' of undefined" in the 'bindTaskEvents' function where the function deals with the "pletedTasksHolder" list. Trying this in the console:

console.log(pletedTasksHolder.children[0]) 

returns the only li just fine.

var taskInput = document.getElementById("new-task"); // new-task
var addButton = document.getElementsByTagName("button")[0]; // first button
var inpleteTasksHolder = document.getElementById("inplete-tasks"); // ul#inplete-tasks
var pletedTasksHolder = document.getElementById("pleted-tasks"); // ul#pleted-tasks

// Add a new task
var addTask = function(){
    console.log("Add task...");
}
// Edit an existing task
var editTask = function() {
    console.log("Edit task...");
}

var deleteTask = function() {
    console.log("Delete task...");
// Delete an existing task

    // When the Delete button is pressed
        // Remove the parent li from the ul
}

var taskCompleted = function() {
    console.log("Complete task...");
// Mark a task as plete
    // When the checkbox is checked
        // Append the task li to the #pleted-tasks
}

// Mark a task as inplete
var taskInplete = function() {
    console.log("Inplete task...");
    // When the checkbox is unchecked
        // Append the task li to the #inplete-tasks
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
    console.log("Bind li events");
    // select li's children
    var checkbox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");

    // bind editTask to editButton
    editButton.onclick = editTask;

    //  bind deleteTask to deleteButton;
    deleteButton.onclick = deleteTask;

    // bind checkBoxEventHandler to checkbox
    checkbox.onchange = checkBoxEventHandler;
}

// Set the click handler to the addTask function
addButton.onclick = addTask;

// Cycle over inpleteTasksHiolder ul list items
for (var i = 0; inpleteTasksHolder.children.length; i++) {
        // bind events to li' children (taskCompleted)
    bindTaskEvents(inpleteTasksHolder.children[i], taskCompleted);
}     

// Cycle over pletedTasksHiolder ul list items

for (var i = 0; pletedTasksHolder.children.length; i++) {
        // bind events to li' children (taskCompleted)
    bindTaskEvents(pletedTasksHolder.children[i], taskInplete);
}     

What can be wrong here? Thanks!

• javascript
• jquery

Share Improve this question Follow asked Apr 6, 2016 at 9:43 Nikolay KomolovNikolay Komolov 12511 gold badge11 silver badge55 bronze badges 2

• 1 What is inpleteTasksHolder.children[i] ? – Rayon Commented Apr 6, 2016 at 9:46
• It is the ul (container) with list items as the children – Nikolay Komolov Commented Apr 6, 2016 at 9:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Problem is with the for loop

Replace

for (var i = 0; inpleteTasksHolder.children.length; i++) {

with

for (var i = 0; i < inpleteTasksHolder.children.length; i++) {

and similarly for pletedTasksHolder

Bascially you have created a loop with no end condition and at some point inpleteTasksHolder.children[i] is undefined.

1. var db = null;
   var db2 = null;
   var db3 = null;
   var dbUser = null;
   var dbName = "estudos.db";
   
   var app = {
       // Application Constructor
       initialize: function() {
           document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
       },
   
       // deviceready Event Handler
       //
       // Bind any cordova events here. Common events are:
       // 'pause', 'resume', etc.
       onDeviceReady: function() {
           this.receivedEvent('deviceready');
       },
   
       // Update DOM on a Received Event
       receivedEvent: function(id) {
           var parentElement = document.getElementById(id);
           var listeningElement = parentElement.querySelector('.listening');
           var receivedElement = parentElement.querySelector('.received');
   
           listeningElement.setAttribute('style', 'display:none;');
           receivedElement.setAttribute('style', 'display:block;');
   
   
           // OPERACOES BD - inicio
   
           //banco de dados local - aceite de termos e outras coisas
           dbUser = window.sqlitePlugin.openDatabase({name: 'user.db', location: 'default'});
           dbUser.transaction(function(tx) {
               tx.executeSql('CREATE TABLE IF NOT EXISTS Users (flg_aceite, flg_valid_bd)');
           }, function(error) {
               alert('Transaction ERROR: ' + error.message);
           }, function() {
               console.log('Database OK');
           });
   
           //copia do banco de dados de estudos
           window.plugins.sqlDB.copy(dbName, 0, copysuccess, copyerror);
           // OPERACOES BD - fim
       }
   };
   
   app.initialize();
   
   //---------------------------------------------------------------
   
   function copysuccess()
   {
       //primeira versão deste banco de dados. o ando anterior.
       //provavelmente realizou a cópia, abro o BD.
       db = window.sqlitePlugin.openDatabase({name: dbName});
       //preciso verificar se existem versões anteriores deste BD. Deleto por precaucao
       dropTable();
       fts_table();
   }
   
   function copyerror(e)
   {
       //esta versao do banco de dados ja existe.
       //abro o BD
       db = window.sqlitePlugin.openDatabase({name: dbName});
       //db3 = window.sqlitePlugin.openDatabase({name: "vtestudos"});
       //alert("copyerror" + JSON.stringify(e));
   }
   
   
   //---------------------------------------------------------------
   
   function fts_table(){
       db.transaction(function(tx) {
       tx.executeSql('CREATE VIRTUAL TABLE vtestudos USING FTS3(titulo, texto, id_titulo)', [], function(tx,res){
             //alert("nao deu erro");
             //db = window.sqlitePlugin.openDatabase({name: "vtestudos"});
             //alert("uai. deu pra abrir");
   
             db.transaction(function(tx) {
             tx.executeSql('INSERT INTO vtestudos(titulo, texto, id_titulo) SELECT titulo, texto, id_titulo FROM estudos', [], function(tx,res){
                 //db3 = window.sqlitePlugin.openDatabase({name: "vtestudos"});
                  console.log('insert ok');
             });
             }, function(err){
                 alert(err.message);
             });
   
       });
       }, function(err){
           alert(err.message);
       });
   }
   
   //---------------------------------------------------------------
   
   function dropTable()
   {
       window.plugins.sqlDB.remove("estudosprev1", 0, rmsuccess,rmerror); 
       window.plugins.sqlDB.remove("estudosprev2", 0, rmsuccess,rmerror);  
   }
   
   function rmsuccess()
   {
       //existe versão anterior
       //alert("removesuccess");
       console.log('existe versão anterior');
   }
   
   function rmerror(e)
   {
       //não existe versão anterior. ignoro.
       //alert("removeerror" + JSON.stringify(e));
       console.log('n existe versão anterior. ignoro.');
   }

本文标签： javascriptUncaught TypeError Cannot read property 39querySelector39 of undefinedStack Overflow