Uncaught TypeError: Невозможно установить для innerHTML значение null - PullRequest
Новая
       1

Uncaught TypeError: Невозможно установить для innerHTML значение null

1 голос
/ 23 сентября 2011

Может кто-нибудь сказать, почему я получаю эту ошибку 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/

1 Ответ

1 голос
/ 23 сентября 2011

Что произойдет, если вы добавите элемент todoItems в body вместе с формой из статьи? 

<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>
...