Question

我有以下html代码，当我在browers控制台中运行以下脚本时，出现以下错误。（我让浏览器完全加载，然后运行脚本，因此，我认为它不受元素顺序的影响）

<div class="main col-lg-9 col-md-8" role="main">
    <div class="entry-content" itemprop="mainContentOfPage" itemscope="" itemtype="https://schema.org/WebPageElement">
                <div class="row"> <div class="col-md-4">
<a href="#" class="su-button su-button-style-flat su-button-wide active" style="color:#FFFFFF;background-color:#87aad1;border-color:#6c88a7;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px" target="_blank" rel="noopener" id="btn1"><span style="color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#abc4df;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none"><i class="sui sui-book" style="font-size:16px;color:#FFFFFF"></i> Session 1</span></a>
</div><div class="col-md-4">
<a href="#" class="su-button su-button-style-flat su-button-wide" style="color:#FFFFFF;background-color:#87aad1;border-color:#6c88a7;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px" target="_blank" rel="noopener" id="btn2"><span style="color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#abc4df;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none"><i class="sui sui-book" style="font-size:16px;color:#FFFFFF"></i> Session 2</span></a>
</div><div class="col-md-4">
<a href="#" class="su-button su-button-style-flat su-button-wide" style="color:#FFFFFF;background-color:#87aad1;border-color:#6c88a7;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px" target="_blank" rel="noopener" id="btn3"><span style="color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#abc4df;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;text-shadow:none;-moz-text-shadow:none;-webkit-text-shadow:none"><i class="sui sui-book" style="font-size:16px;color:#FFFFFF"></i> Session 3</span></a>
</div></div>
<p></p>
                </div>
                        </div>

和Javascript：

<script>
let timeToActivate = (new Date("June 23, 2019 20:06:00")).getTime();
let timeToDeActivate = (new Date("June 24, 2019 20:07:00")).getTime();
let currTime = Date.now();
var btn = document.querySelector("#btn1");
console.log(btn1.classList);
if(currTime > timeToActivate && currTime < timeToDeActivate){
    // Write Code To Activate Button
    btn1.classList.add("active");
}else if(currTime < timeToActivate){
    setTimeout(() => {
      btn1.classList.add("active");
         setTimeout(() => {
        btn1.classList.remove("active");
         }, timeToDeActivate - Date.now())
    }, timeToActivate - currTime);
}
</script>

为什么会出现此错误？

未捕获的TypeError：无法读取null的属性“ classList” 在：5：18

谢谢

如何修复“未捕获的TypeError：无法读取null的属性'classList'”（不是由元素Order引起）

0 个答案: