javascript - 「Uncaught TypeError: Cannot read property 'classList' of null」を修正する方法 (要素 Order が原因ではない)

Question

次の html コードがあります。ブラウザ コンソールで次のスクリプトを実行すると、次のエラーが発生します。（ブラウザを完全に読み込ませてからスクリプトを実行するので、要素の順序には影響されないと思います）

<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: :5:18 で null のプロパティ 'classList' を読み取ることができません

ありがとう