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

i have a span with the same value..

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

where $number have a value..

and my js code is..

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();

the problem is the value still remains and do not change, trying to uncomment the first alert shows an alert with the right value, but when i try to comment it the second alert never executed, giving me an idea that the document.getelementbyid().innerhtml is the one that is not working, been with this for a few hours, any help will be appreciated. thanks in advance

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
drap5081683 2015-10-06 02:19
关注
Your error message Cannot set property 'innerHTML' of null" means that:

document.getElementById("msgNotif1")

is returning null. That can happen for several possible reasons:

There is no element in your page with id="msgNotif1".

You are calling this code before your document has finished loading and thus the element with id="msgNotif1" has not yet loaded. This can commonly happen if you execute your code in the <head> section of the document rather than at the very end of <body> or in response to the DOMContentLoaded event.

Your content is dynamically loaded (not in the original page HTML) and you are calling document.getElementById("msgNotif1") before your dynamic content has been loaded.

You have some HTML errors which are preventing the proper parsing of your HTML that contains the element with id="msgNotif1".

For a general purpose description of how to run Javascript after the current page has been loaded without using a framework like jQuery, see this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

dtwncxs3547 2015-10-06 02:57

关注

You are receiving this error in your console because it doesn't exist at the time your script is running. This can be caused if the element hasn't been loaded when your script is running, if your IDs aren't the same, or if the element doesn't exist in your html. If you are referencing the element before it loads, add a function that executes when your page loads.

You can use 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();
});

or with pure Javascript to create the event.

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();
};

Valid points have been brought up in that doing Ajax requests with pure Javascript takes much more code than if you were to use JQuery. This is the reason why I (and many others) use JQuery for all the Ajax requests performed. JQuery has many methods for Ajax that will save a lot of time and code and in the long run will reduce your file size by a few bytes since, with JQuery, the code is reused.

查看更多回答(1条)

报告相同问题？

关注问题

由于某种原因，document.getElementById（）。innerHTML不起作用？ html javascript php
2015-10-06 02:11

回答 2 已采纳 Your error message Cannot set property 'innerHTML' of null" means that: document.getElementById("
Javascript document.getElementById CSS无法正常工作？ css javascript php
2017-02-23 09:36

回答 2 已采纳 Try the following: <div class="uitlog_inlog"> <a href="login.php" class="navigatieknop
document.getElementById赋值问题 javascript
2021-03-18 11:22

回答 2 已采纳 document.getElementById("new_project_status").setAttribute('value','完成');
【前端】【JavaScript】基础知识
2023-02-05 23:48

码字小萌新♡的博客 = 来做不相等运算不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false 使用 === 来做全等运算用来判断两个值是否全等，它和...
document.getElementById后面不能使用.readonly=false吗 java 有问必答
2021-05-14 17:03

回答 7 已采纳楼主最好发一个简单的测试代码出来，没设置成功和你的代码有关，如js脚本没在onload事件中执行并且放在要操作的dom对象上了导致获取不到dom导致为null无法设置readOnly属性。用js设
JavaScript验证 - document.getElementById在Bootstrap模式中不起作用 html javascript php
2015-11-25 13:48

回答 1 已采纳 EDIT: looks like you can't do document.getElementById, you can do this instead: function formChec
document.getElementById("user").value; 获取不到值 javascript
2020-09-11 11:02

回答 2 已采纳获取属性值没错；你得写到函数里面喔；
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
2021-12-25 22:22

有两把刷子的博客 2022年最新前端面试题热门题目（面经最全版）（蛋糕）...持续维护中，HTML和Css部分vue部分，Null，undefined，Boolean，Number，String，BigInt 、BigInt 、Object、1. **解构赋值、扩展运算符、class类、模块化 ...
新手 css js ，document.getElementById("").innerHTML 添加div错误 css html5
2018-10-31 06:15

回答 2 已采纳 style后面用单引号
使用jquery 执行document.getElementById("btnExpExcel").href 时遇到额bug javascript jquery
2022-04-20 11:56

回答 2 已采纳多加一个隐藏按钮做隔离，这样就不会自动触发了
var chartDom = document.getElementById("chartsA")!； elementui
2021-11-03 17:11

回答 4 已采纳！可将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都为false。
前端学习—WebApi-day01
2022-07-09 08:56

桉屿念汐的博客三、获取元素（一）根据ID获取 1、语法语法：document.getElementById(id) 作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象或 null 2、案例今天是2022年7月8日（二）根据标签名获取...
var x=document.getElementById("demo").value;这里为什么.value，这里这么写返回的不是空值吗？都没有设置value的值 javascript
2022-10-18 11:26

回答 2 已采纳 input 就是一个输入框呀，你输入值，对应的document.getElementById("demo").value就能获取到值，不输入的话默认是一个空的字符型 ""，会提示不是数字
java基础学习笔记
2023-02-28 10:51

良千阙的博客 } class C extends B{ int c=3 } 修饰词作用域修饰词 /作用域当前类同胞类子孙类其他类 Public 可访问可访问可访问可访问 Protected 可访问可访问可访问不可访问 Default 可访问可访问不可访问不可...
【JavaScript 教程】DOM——Document 节点
2022-06-10 09:35

油墨香^_^的博客 document节点对象代表整个文档，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 document对象有不同的办法可以获取。 ...
没有解决我的问题, 去提问

悬赏问题

¥15 MAX98357A 和stm32通讯后声音异常
¥15 自学计算机组成原理前要学哪些书
¥15 如何仅使用递归法改变链表顺序
¥30 频率与占空比均可调的方波发生器
¥15 VB6.0中PICTUREBOX加载本地图片无法显示
¥100 关于游戏app session获取的问题
¥15 爬虫程序爬取TTGChina网站文章代码
¥35 由于系统缓冲区空间不足或队列已满，不能执行套接字上的操作。
¥15 如何用下图方法在AMESim中搭建离心泵模型
¥15 C#连接服务器，请求时报Ssl/Tsl未能建立安全通道

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

2条回答 默认 最新

悬赏问题

2条回答默认最新