How to fix "Uncaught TypeError: Cannot read property 'classList' of null" ( NOT caused by element Order)

Question

I have following html code, when I run the following script in browers console, I get following error. (I let browser to be loaded completely, then I run the script, hence, I guess it's not affected by element order)

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

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

Why do I get this error?

Uncaught TypeError: Cannot read property 'classList' of null at :5:18

Thanks