javascript - 未捕获的类型错误 : Cannot read property 'style' of null at frame

Question

我正在制作一个加载栏。

点击下载时出现错误

Uncaught TypeError: Cannot read property 'style' of null

我不知道我哪里错了请有人帮我这是我的代码

<a class="tooltip-test" id="header"><div class="progress" id="headerTop" style="cursor:default">
                <div id="myElement" class="progress-bar bg-info progress-bar-striped progress-bar-animated myBar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                    <p class="text-center">0%</p>
                </div>
            </div></a>
            <button onclick="move()" type="button" class="btn btn-outline-primary btn-lg">download</button>
        </div>
        <script type="text/javascript">
            function move() {
                document.getElementById("headerTop").style.cursor = "wait";
                var elem = document.getElementById("myBar");
                var width = 0;
                var id = setInterval(frame, 1000);
                function frame() {
                    if (width >= 99) {
                        var number = random(99, 100)
                        if(number = 99) {
                            clearInterval(id);
                            document.getElementById("MyElement").className =
                            document.getElementById("MyElement").className.replace
                            ( /(?:^|\s)bg-info(?!\S)/g , 'bg-danger' )
                            document.getElementById("header").title = "Oops looks like something has gone wrong reload the page to start over";
                        }else if (number = 100) {
                            clearInterval(id);
                            document.getElementById("MyElement").className =
                            document.getElementById("MyElement").className.replace
                            ( /(?:^|\s)bg-info(?!\S)/g , 'bg-success' )
                            document.getElementById("header").title = "download is ready";
                        }
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        elem.innerHTML = width * 1 + '%';
                    }
                }
            }
    </script>

F.Y.I 我正在使用 bootstrap 进行样式设置

Answer 1

我认为问题在于这一行:

var elem = document.getElementById("myBar");

您正在按 Id 选择，但 myBar 是一个类

所以你应该按类名来选择

您也可以像下面那样按 id 选择:

var elem document.getElementById("MyElement");

这可能是最简单的事情了。