未捕获的类型错误：无法将 innerHTML 设置为 null
有人能告诉我为什么我在下面的代码中收到这个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/
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/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果将
todoItems元素与文章中的表单一起添加到body中，会发生什么？What happens if you add the
todoItemselement in thebodyalong with the form from the article?