-1
私はこのエラーを検出しましたが、まだ解決できません。私はDBに物事を追加します。値を "1"に設定して "データを取得"をクリックすると、 "Uncaught TypeError：nullの" innerHTML 'プロパティを設定できません。未知の型エラー：nullの 'innerHTML'プロパティを設定できません。本文へのスクリプトの移動が機能しません。
<script>を<body>に移動しましたが、エラーはまだ残ります。また、データは表示されません。解決方法に関する提案： *キャッチされていないタイプエラー：ヌルエラーの 'innerHTML'プロパティを設定できません。 *データが必要ですか？
私はjQueryだけで純粋なJSを使用することはできません。
コード：
<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
</head>
<body>
<input type="text" id="name" placeholder="Name"><br/>
<input type="email" id="email" placeholder="Email"><br/>
<button id="addButton">Add Data</button>
<input type="text" id="key" placeholder="Key"></br>
<button id="getPersonButton">getPersonButton</button>
<script>
var db;
function indexedDBOk() {
return "indexedDB" in window;
}
document.addEventListener("DOMContentLoaded", function() {
//No support? Go in the corner and pout.
if(!indexedDBOk) return;
var openRequest = indexedDB.open("idarticle_people2",1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
if(!thisDB.objectStoreNames.contains("people")) {
thisDB.createObjectStore("people", {autoIncrement:true});
}
}
openRequest.onsuccess = function(e) {
console.log("running onsuccess");
db = e.target.result;
//Listen for add clicks
document.querySelector("#addButton").addEventListener("click", addPerson, false);
document.querySelector("#getPersonButton").addEventListener("click", getPerson, false);
}
openRequest.onerror = function(e) {
//Do something for the error
}
},false);
function addPerson(e) {
var name = document.querySelector("#name").value;
var email = document.querySelector("#email").value;
console.log("About to add "+name+"/"+email);
//Get a transaction
//default for OS list is all, default for type is read
var transaction = db.transaction(["people"],"readwrite");
//Ask for the objectStore
var store = transaction.objectStore("people");
//Define a person
var person = {
name:name,
email:email,
created:new Date()
}
//Perform the add
var request = store.add(person);
request.onerror = function(e) {
console.log("Error",e.target.error.name);
//some type of error handler
}
request.onsuccess = function(e) {
console.log("Woot! Did it");
}
}
function getPerson(e) {
var key = document.querySelector("#key").value;
if(key === "" || isNaN(key)) return;
var transaction = db.transaction(["people"],"readonly");
var store = transaction.objectStore("people");
var request = store.get(Number(key));
request.onsuccess = function(e) {
var result = e.target.result;
console.dir(result);
if(result) {
var s = "<h2>Key "+key+"</h2><p>";
for(var field in result) {
s+= field+"="+result[field]+"<br/>";
}
document.querySelector("#status").innerHTML = s;
} else {
document.querySelector("#status").innerHTML = "<h2>No match</h2>";
}
}
}
</script>
</body>
</html>
id = "status" HTML要素はどこですか？ – Derek