CODEWITHSUNDEEP
javascriptjqueryhtml
alwade24
alwade24

Reputation: 55

Cannot read property 'getElementsByTagName' of null

Please pardon my confusion as I stumble through this, I am new to javascript and this kind of thing. Please also pardon me if my code is garbage, because it is a combination of examples I found, and things I figured out (and didn't figure out)!

I am trying to run this html file in Open Broadcaster Software:

<html>
<head>
    <link rel="stylesheet" href="css/stylesheet_twitter1.css" type="text/css" charset="utf-8">
    <script src="js/jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jstween-1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/countries.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

            var timestampOld;
            var timestamp;
            var mText4;

            var xmlDoc;

            var xhr = new XMLHttpRequest();

            var animating = false;
            var doUpdate = false;

            function init() {

                xhr.overrideMimeType('text/xml');

                var timeout = this.window.setInterval(function() {
                    pollHandler();
                }, 250);

                $('#mText4').html('');
                $('#board').tween({
                   top:{
                      start: '80',
                      stop: '0',
                      units: 'px',
                      time: 0,
                      duration: 0.8,
                      effect:'easeOut'
                   }
                });

                $.play();
            }



    </script>
</head>
<body onLoad="init()">

    <script type="text/javascript">
            function pollHandler()
            {
              loadData();
              if (timestamp != timestampOld) {
                  doUpdate = true;
              }
              if (!animating && doUpdate) {
                  updateBoard();
              }
            }

            function loadData() {
                xhr.open('GET', 'streamcontrol.xml');
                xhr.send();
                xhr.onreadystatechange = function(){
                        xmlDoc = xhr.responseXML;


                        mText4 = getValueFromTag(xmlDoc,'mText4');                      
                        timestampOld = timestamp;
                        timestamp = getValueFromTag(xmlDoc,'timestamp');

                }
            }

            function updateBoard() {


                if ($('#mText4').html() != mText4) {
                    animating = true;
                    $('#mText4').tween({
                        opacity: {
                          start: 100,
                          stop: 0,
                          time: 0,
                          duration: 0.5,
                          effect: 'easeIn'
                        },
                        onStop: function(){
                            $('#mText4').html(mText4);
                        }
                    });

                    $('#mText4').tween({
                        opacity: {
                          start: 0,
                          stop: 100,
                          time: 0.5,
                          duration: 0.5,
                          effect: 'easeOut'
                        },
                        onStop: function(){
                            animating = false;
                        }
                    });
                }

                $.play();

                doUpdate = false;
            }

            function getValueFromTag (xmlDoc,tag) {
                if (xmlDoc.getElementsByTagName(tag).length != 0 ) {
                    if (xmlDoc.getElementsByTagName(tag)[0].childNodes.length == 0) {
                            return '';
                        } else {
                            return xmlDoc.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
                    }
                } else {
                    return '';
                }
            }
            </script>
    <div id="board">
        <div id="mText4"></div>
    </div>
</body>
</html>

It works just fine, but after a few hours of having this (and two other html files) going, the software would crash. This caused me to look at the log files that it creates, and I was seeing the following a LOT of times:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null @http://absolute/D:/obs%20stuff/browserfiles/Twitter1.html334

So I ran it in Firefox, and it was then throwing the following error (again, a LOT):

TypeError: xmlDoc is null

I know for sure that streamcontrol.xml is not null. I feel like those errors are pointing me in a good direction, but after about a collective 10+ hours over two days of trying different things I have seen on different threads, I am at a loss.

Upvotes: 1

Views: 7986

Answers (1)

Chad Schouggins
Chad Schouggins

Reputation: 3521

onreadystatechange does not only fire when your request has completed successfully. You must check that the ready state is complete and the status is successful in the handler.

Check here for some usage details.

Typically, you'll want to check that xhr.readystate === 4 to know it has a response then check the status (xhr.status === 200 means a successful response)

Upvotes: 1

Related Questions