未捕获的类型错误：无法将innerHTML设置为空

有人可以告诉我为什么在下面的代码中得到这个innerHTML错误吗？未捕获的类型错误：无法将innerHTML设置为空

<html> 
<head> 
    <title> 
     My Todo List 
    </title> 
    </head> 
    <script type="text/javascript"> 
     var html5rocks = {}; 
     html5rocks.webdb = {}; 

     html5rocks.webdb.db = null; 

     html5rocks.webdb.open = function() { 
      var dbSize = 5 * 1024 * 1024; // 5MB 
      html5rocks.webdb.db = openDatabase('Todo', '1.0', 'todo manager', dbSize); 
     } 

     html5rocks.webdb.onError = function(tx, e) { 
      alert('Something unexpected happened: ' + e.message); 
     } 

     html5rocks.webdb.onSuccess = function(tx, r) { 
      // re-render all the data 
      // loadTodoItems is defined in Step 4a 
      html5rocks.webdb.getAllTodoItems(loadTodoItems); 
      } 
     html5rocks.webdb.createTable = function() { 
     html5rocks.webdb.db.transaction(function(tx) { 
      tx.executeSql('CREATE TABLE IF NOT EXISTS ' + 
          'todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []); 
      }); 
     } 

     html5rocks.webdb.addTodo = function(todoText) { 
      html5rocks.webdb.db.transaction(function(tx){ 
      var addedOn = new Date(); 
      tx.executeSql('INSERT INTO todo(todo, added_on) VALUES (?,?)', 
       [todoText, addedOn], 
       html5rocks.webdb.onSuccess, 
       html5rocks.webdb.onError); 
      }); 
     } 
     html5rocks.webdb.getAllTodoItems = function(renderFunc) { 
      html5rocks.webdb.db.transaction(function(tx) { 
      tx.executeSql('SELECT * FROM todo', [], renderFunc, 
       html5rocks.webdb.onError); 
      }); 
     } 
     function loadTodoItems(tx, rs) { 
      var rowOutput = ""; 
      for (var i=0; i < rs.rows.length; i++) { 
      rowOutput += renderTodo(rs.rows.item(i)); 
      } 
      var todoItems = document.getElementById('todoItems'); 
      todoItems.innerHTML = rowOutput; 
     } 

     function renderTodo(row) { 
      return '<li>' + row.ID + 
       '[<a onclick="html5rocks.webdb.deleteTodo(' + row.ID + ');">X</a>]</li>'; 
     } 

     html5rocks.webdb.deleteTodo = function(id) { 
      html5rocks.webdb.db.transaction(function(tx) { 
      tx.executeSql('DELETE FROM todo WHERE ID=?', [id], 
      html5rocks.webdb.onSuccess, html5rocks.webdb.onError); 
      }); 
     } 
     function addTodo() { 
      var todo = document.getElementById('todo'); 
      html5rocks.webdb.addTodo(todo.value); 
      todo.value = ''; 
     } 
     function init() { 
      html5rocks.webdb.open(); 
      html5rocks.webdb.createTable(); 
      html5rocks.webdb.getAllTodoItems(loadTodoItems); 
     } 
    </script> 
    </head> 
<body onload="init()"> 
</body>

我下面这个教程：http://www.html5rocks.com/en/tutorials/webdatabase/todo/

来源

2011-09-22 n_x_l

在哪条线上得到错误？您是否已经在开发人员工具中执行了执行？ – robertc

是的，我做到了。它说错误在这一行：todoItems.innerHTML = rowOutput; –

你可以尝试'todoItems.innerHTML = rowOutput || '''如果有可能rowOutput可能没有被正确填充，它会给你一个占位符。 –

如果您在body从文章的形式一起加入todoItems元素会发生什么？

<body onload="init()"> 
    <ul id="todoItems"></ul> 
    <form type="post" onsubmit="addTodo(); return false;"> 
     <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;"> 
     <input type="submit" value="Add Todo Item"> 
    </form> 
</body>

来源

2011-09-22 22:51:34 robertc

+1。我对此很陌生，我忘了看到我错过了等式的另一面，html。我想我应该从更基本的教程开始。谢谢你。 –

@Wel不用担心，它看起来像你几乎在那里与这一个虽然。顺便说一句，你不必说'+1' - 答案旁边有按钮将它投票;） – robertc

是的，以及我没有足够的声誉。 :) –

未捕获的类型错误：无法将innerHTML设置为空

回答

相关问题