Question

我有一个具有相同价值的跨度..

echo "<span id='msgNotif1' class='badge'  style='position:relative;right:5px;bottom:10px;'>".$number."</span>";

其中$ number有一个值..

我的js代码是..

var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var val = xmlhttp.responseText;
                //alert(val);
                document.getElementById("msgNotif1").innerHTML = val;
                //document.getElementById("msgNotif2").innerHTML = val;
                alert(val);
                //document.getElementById("msgNotif3").innerHTML = xmlhttp.responseText;    
            }
        }
        xmlhttp.open("GET", "some page", true);
        xmlhttp.send();

问题是价值仍然存在且不会改变，尝试取消注释第一个警报会显示一个具有正确值的警报，但是当我尝试对其进行评论时，第二个警报从未执行过，让我知道document.getelementbyid（）。innerhtml是一个无法正常工作的警报。这几个小时，任何帮助将不胜感激。提前谢谢

Answer 1

您的错误消息Cannot set property 'innerHTML' of null"表示：

document.getElementById("msgNotif1")

正在返回null。出现这种情况可能有几个原因：

您的信息页中没有id="msgNotif1"。
您在文档加载完成之前调用此代码，因此尚未加载id="msgNotif1"的元素。如果您在文档的<head>部分执行代码而不是<body>的最后部分或响应DOMContentLoaded事件，则通常会发生这种情况。
您的内容是动态加载的（不在原始页面HTML中），而是在加载动态内容之前调用document.getElementById("msgNotif1")。
您遇到一些HTML错误，导致无法正确解析包含id="msgNotif1"元素的HTML。

有关如何在不使用jQuery等框架加载当前页面后运行Javascript的一般用途说明，请参阅以下答案：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Answer 2

您在控制台中收到此错误，因为它在您的脚本运行时不存在。如果在脚本运行时未加载元素，如果您的ID不相同，或者您的html中不存在该元素，则可能会导致这种情况。如果在加载前引用元素，请添加在页面加载时执行的函数。

您可以使用JQuery

$(document).ready(function(){
    var xmlhttp = new XMLHttpRequest();
       xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var val = xmlhttp.responseText;
                //alert(val);
                document.getElementById("msgNotif1").innerHTML = val;
                //document.getElementById("msgNotif2").innerHTML = val;
                alert(val);
                //document.getElementById("msgNotif3").innerHTML = xmlhttp.responseText;    
            }
        }
        xmlhttp.open("GET", "some page", true);
        xmlhttp.send();
});

或使用纯Javascript来创建活动。

window.onload = function(){
    var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var val = xmlhttp.responseText;
                //alert(val);
                document.getElementById("msgNotif1").innerHTML = val;
                //document.getElementById("msgNotif2").innerHTML = val;
                alert(val);
                //document.getElementById("msgNotif3").innerHTML = xmlhttp.responseText;    
            }
        }
        xmlhttp.open("GET", "some page", true);
        xmlhttp.send();
};

提出了一些有用的观点，即使用纯Javascript执行Ajax请求所需的代码比使用JQuery要多得多。这就是我（和许多其他人）使用JQuery执行所有Ajax请求的原因。 JQuery有很多Ajax方法可以节省大量的时间和代码，从长远来看，将文件大小减少几个字节，因为使用JQuery，代码可以重用。

由于某种原因，document.getElementById（）。innerHTML不起作用？

2 个答案: