Uncaught TypeError: Cannot set innerHTML to null

Question

Can somebody tell why I get this innerHTML error in the following code?

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

I'm following this tutorial: http://www.html5rocks.com/en/tutorials/webdatabase/todo/

Answer 1

What happens if you add the todoItems element in the body along with the form from the article?

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

Uncaught TypeError: Cannot set innerHTML to null

Question

1 answers

solution1
1 ACCPTED 2011-09-22 22:51:34

Uncaught TypeError: Cannot set innerHTML to null

Question

1 answers

solution1 1 ACCPTED 2011-09-22 22:51:34

solution1
1 ACCPTED 2011-09-22 22:51:34