Question

我正在制作装载栏。

现在我点击下载时出现错误

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;为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我正在使用引导程序进行样式化

Answer 1

我认为问题在于这一行：

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

您按ID选择，但myBar是一个类

所以你应该按类名选择

您也可以按照以下方式选择ID：

var elem document.getElementById("MyElement");

这可能是最容易做到的事情。

Answer 2

观察：id中没有名称为myBar的{{1}}。

声明： DOM将返回null。

因此，当您尝试访问var elem = document.getElementById("myBar")的{{1}}属性时，您会收到以下错误。

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;为null

Answer 3

在Jonathan纠正之后，另一个问题可能是 elem ， width 和 id 在父move（）函数中定义，而不是在子框架（）函数中。

ffprobe -v error -of flat=s_ -select_streams 1 -show_entries stream=duration -of default=noprint_wrappers=1:nokey=1

未被捕获的TypeError：无法读取属性＆＃39; style＆＃39;在帧处为null

3 个答案: