Javascript 未捕获类型错误：无法设置属性'；innerHTML'；如果为null，则将脚本移动到正文不会'；行不通_Javascript_Html

Javascript 未捕获类型错误：无法设置属性'；innerHTML'；如果为null，则将脚本移动到正文不会'；行不通

javascript html

Javascript 未捕获类型错误：无法设置属性'；innerHTML'；如果为null，则将脚本移动到正文不会'；行不通,javascript,html,Javascript,Html,我用谷歌搜索出了这个错误，但仍然无法解决。我向数据库中添加了一些东西，当我将值设置为“1”并单击“获取数据”时，我会收到“UncaughtTypeError:无法将属性'innerHTML'设置为null”错误我已将我的移动到，但错误仍然存在。它也不显示任何数据。关于如何解决的任何建议： *未捕获的TypeError:无法将属性“innerHTML”设置为null错误 *需要显示数据吗我不能只使用jQuery和纯JS 代码： <!doctype html> <

我用谷歌搜索出了这个错误，但仍然无法解决。我向数据库中添加了一些东西，当我将值设置为“1”并单击“获取数据”时，我会收到“UncaughtTypeError:无法将属性'innerHTML'设置为null”错误

我已将我的

移动到

，但错误仍然存在。它也不显示任何数据。关于如何解决的任何建议： *未捕获的TypeError:无法将属性“innerHTML”设置为null错误 *需要显示数据吗

我不能只使用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 = "&lt;h2>Key "+key+"&lt;/h2>&lt;p>";
                for(var field in result) {
                    s+= field+"="+result[field]+"&lt;br/>";
                }
                document.querySelector("#status").innerHTML = s;
            } else {
                document.querySelector("#status").innerHTML = "&lt;h2>No match&lt;/h2>";
            }
        }
    }
</script>


</body>
</html>






添加数据


getPersonButton
var-db；
函数indexedDBOk（）{
在窗口中返回“indexedDB”；
}
document.addEventListener（“DOMContentLoaded”，function（））{
//没有支持？到角落里撅嘴。
如果（！indexedDBOk）返回；
var openRequest=indexedDB.open（“idarticle_people2”，1）；
openRequest.onupgradeneeded=函数（e）{
var thisDB=e.target.result；
如果（！thisDB.objectStoreNames.contains（“人”））{
thisDB.createObjectStore（“人”{autoIncrement:true}）；
}
}
openRequest.onsuccess=函数（e）{
log（“在成功时运行”）；
db=e.target.result；
//听添加点击
document.querySelector（“添加按钮”）.addEventListener（“单击”，addPerson，false）；
document.querySelector（“getPersonButton”）.addEventListener（“单击”，getPerson，false）；
}
openRequest.onerror=函数（e）{
//为这个错误做点什么
}
}，假）；
功能添加人员（e）{
var name=document.querySelector（“#name”）.value；
var email=document.querySelector（“#email”）.value；
console.log（“即将添加”+name+“/”+电子邮件）；
//获得交易
//操作系统列表的默认值为all，类型的默认值为read
var transaction=db.transaction（[“人”]，“读写”）；
//询问objectStore
var store=transaction.objectStore（“人”）；
//定义一个人
个人变量={
姓名:姓名,，
电邮:电邮,，
创建日期：新日期（）
}
//执行添加
var请求=存储。添加（个人）；
request.onerror=函数（e）{
log（“Error”，例如target.Error.name）；
//某种类型的错误处理程序
}
request.onsuccess=函数（e）{
console.log（“Woot！做到了”）；
}
}
功能getPerson（e）{
var key=document.querySelector（“#key”）.value；
if（key==“”| | isNaN（key））返回；
var transaction=db.transaction（[“人”]，“只读”）；
var store=transaction.objectStore（“人”）；
var请求=store.get（Number（key））；
request.onsuccess=函数（e）{
var结果=e.target.result；
console.dir（结果）；
如果（结果）{
var s=“h2>Key”+Key+”/h2>p>”；
for（结果中的var字段）{
s+=字段+“=”+结果[字段]+“br/>”；
}
document.querySelector（“#status”）.innerHTML=s；
}否则{
document.querySelector（“#status”）.innerHTML=“h2>不匹配/h2>”；
}
}
}

要设置id为

状态的元素的内容

，您需要先将具有此id的元素添加到文档中：

<body>
  <div id='status'></div>

您想设置元素的

innerHTML

，该元素的

id

为

status

。因为没有这样的元素，所以

document.querySelector("#status")

是

null

，因此如果您尝试使用

document.querySelector("#status").innerHTML

，则您将得到问题中提到的错误。当代码尝试使用其

innerHTML

时，您可以通过确保html具有

id=“status”

来解决此问题。此外，您还可以执行以下操作：

var context = document.querySelector("#status");
if (!!context) {
    //do something with context.innerHTML
}

您的id=“status”HTML元素在哪里？

var context = document.querySelector("#status");
if (!!context) {
    //do something with context.innerHTML
}