for some reason, document.getElementById().innerHTML is not working?

Question

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

I recommend you use jQuery for this. It's much easier to use once you understands it. — jessica, Oct 06 '15 at 02:17
yes i received errors, saying "Uncaught TypeError: Cannot set property 'innerHTML' of null" — johnguild, Oct 06 '15 at 02:17
when is your javascript executing? Is it in the ``? Are you waiting for page load before your javascript executes? — Pedro Estrada, Oct 06 '15 at 02:18
ok that means that the element you are referencing doesn't exist. — www139, Oct 06 '15 at 02:18
i see, i guess it tries to change the span before it was printed out, let me check it.. — johnguild, Oct 06 '15 at 02:20
try getting rid of the ajax and just test if `document.getElementById("msgNotif1")` is not undefined. Also its safer to always reference the document using the global `window.document.getElementById` — NullHappens, Oct 06 '15 at 02:21
ok im still having error, but @www139 already explained the error, i would be glad if you post an answer for you had commented first before jfriend00 post an answer, or if you dont mind ill accept his as the answer. — johnguild, Oct 06 '15 at 02:32
@jfriend00 answer should work for you. Look and see if the element you are referencing exists at the time the script executes. If the element is there and the id is the same, that means you are executing the script before the document has loaded the element. In which case, use a window.onload event and then perform your request. — www139, Oct 06 '15 at 02:41
Thank you. I posted an answer, but it was stupid. I found an outdated website that said id attributes with number characters weren't valid. I'll write a second answer. However @jfriend00 deserves credit for giving you the answer. — www139, Oct 06 '15 at 02:47

score 3 · Accepted Answer · edited May 23 '17 at 12:06

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

score 0 · Answer 2 · answered Oct 06 '15 at 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.

for some reason, document.getElementById().innerHTML is not working?

2 Answers2