Question

我已经用Google搜索了这个错误，但我仍然无法解决它。我将内容添加到数据库中，当我将值设置为“1”并单击“获取数据”时，我收到“未捕获的TypeError：无法设置属性'innerHTML'的null”错误。

我已将<script>移至<body>，但错误仍然存在。它也没有显示任何数据。有关如何解决的任何建议： *未捕获TypeError：无法设置null错误的属性'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 = "&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>

Answer 1

要设置ID为status的元素的内容，您需要首先将具有此ID的元素添加到文档中：

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

之后，您将可以通过querySelector访问它：

document.querySelector("#status")

Answer 2

您想要设置innerHTML id status元素的document.querySelector("#status")。由于没有这样的元素，结果是

null

是document.querySelector("#status").innerHTML，因此如果您尝试使用

id="status"

，然后你会得到问题中提到的错误。当代码尝试使用innerHTML时，您可以确保拥有var context = document.querySelector("#status"); if (!!context) { //do something with context.innerHTML }的html来解决问题。此外，你可以这样做：

$('#dtSearchResult').DataTable({
                    "filter": false,
                    "pagingType": "simple_numbers",
                    "orderClasses": false,
                    "order": [[0, "asc"]],
                    "info": true,
                    "scrollY": "450px",
                    "scrollCollapse": true,
                    "bLengthChange": false,
                    "searching": true,
                    "bStateSave": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": VMCreateExtraction.AppSecurity.websiteNode() + "/api/Collection/SearchCustIndividual",
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        aoData.push({ "name": "ccUid", "value": ccUid });
                       //Below i am getting the echo that i will be sending to Server side
                        var echo = null;
                        for (var i = 0; i < aoData.length; i++) {
                            switch (aoData[i].name) {
                                case 'sEcho':
                                    echo = aoData[i].value;
                                    break;
                                default:
                                    break;
                            }
                        }
                        $.ajax({
                            "dataType": 'json',
                            "contentType": "application/json; charset=utf-8",
                            "type": "GET",
                            "url": sSource,
                            "data": aoData,
                            success: function (msg, a, b) {
                                $.unblockUI();

                                var mappedCusNames = $.map(msg.Table, function (Item) {
                                    return new searchGridListObj(Item);
                                });
                                var data = {
                                    "draw": echo,
                                    "recordsTotal": msg.Table2[0].TOTAL_NUMBER_OF_RECORDS,
                                    "recordsFiltered": msg.Table1[0].FILTERED_RECORDS,
                                    "data": mappedCusNames
                                };
                                fnCallback(data);
                                $("#dtSearchResult").show();
                                ko.cleanNode($('#dtSearchResult')[0]);
                                ko.applyBindings(VMCreateExtraction, $('#dtSearchResult')[0]);
                            }
                        })
                    },
                    "aoColumns": [{
                        "mDataProp": "C_UID"
                    }, {
                        "mDataProp": "C_LAST_NAME"
                    }, {
                        "mDataProp": "C_FIRST_NAME"
                    }, {
                        "mDataProp": "C_USER_ID"
                    }, {
                        "mDataProp": "C_EMAIL"
                    }, {
                        "mDataProp": "C_COMPANY"
                    }],
                    "aoColumnDefs": [{ "defaultContent": "", "targets": "_all" },
                //I create a link in 1 st column
                    ]
                });

未捕获的TypeError：无法将属性'innerHTML'设置为null，将脚本移动到body不起作用

2 个答案: