无法读取null的属性'getElementsByTagName'

时间:2015-05-08 00:15:04

标签: javascript jquery html

请原谅我的困惑,因为我偶然发现了这一点,我是javascript和这类新手。如果我的代码是垃圾,也请原谅我,因为它是我发现的一些例子,以及我想出来的事情(并没有想出来)!

我正在尝试在Open Broadcaster软件中运行此html文件:

<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>

它工作得很好,但是在这个(以及其他两个html文件)运行几个小时后,软件会崩溃。这导致我查看它创建的日志文件,我看到了很多次:

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

所以我在Firefox中运行它,然后抛出以下错误(再次,很多):

TypeError: xmlDoc is null

我确信streamcontrol.xml不是空的。我觉得这些错误让我指向了一个好的方向,但经过两天多的集体尝试我在不同线程上看到的不同的事情两天后,我感到很茫然。

1 个答案:

答案 0 :(得分:1)

onreadystatechange不仅会在您的请求成功完成时触发。您必须检查就绪状态是否已完成,并且处理程序中的状态是否成功。

检查here以了解一些使用详情。

通常,您需要检查xhr.readystate === 4是否知道它有响应然后检查状态(xhr.status === 200表示成功响应)