未捕獲的類型錯誤：無法將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設置爲空

回答

相關問題