duanan5940
2015-10-06 02:11
浏览 561

由于某种原因,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

图片转代码服务由CSDN问答提供 功能建议

我的跨度具有相同的值..

   echo“&lt; span id ='msgNotif1'class ='badge'style ='position:relative; right:5px; bottom:10px;'&gt;”。$ number。“&lt; / span&gt;”;  
   
 
 

其中$ number有一个值..

我的js代码是.. \ n

  var xmlhttp = new XMLHttpRequest(); 
 xmlhttp.onreadystatechange = function(){
 if(xmlhttp.readyState == 4&amp;&amp; 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(); 
   
 
 

问题是值仍然保留并且不会更改, trying取消注释第一个警报显示具有正确值的警报,但是当我尝试对其进行注释时,第二个警报从未执行,让我知道document.getelementbyid() .innerhtml是一个不工作的,已经使用了几个小时, 非常感谢。 提前知道

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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:

    1. There is no element in your page with id="msgNotif1".
    2. 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.
    3. 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.
    4. 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

    已采纳该答案
    打赏 评论
  • 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.

    打赏 评论

相关推荐 更多相似问题