javascript - 如何修复“Uncaught TypeError: Cannot read property 'classList' of null”(不是由元素顺序引起的)
问题描述
我有以下 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>
为什么我会收到此错误?
未捕获的类型错误:无法在 :5:18 读取 null 的属性“classList”
谢谢
解决方案
推荐阅读
- c - 如何在文件中逐字扫描fscanf?
- r - 如何根据多个变量的字符响应过滤数据?
- ms-access - 如何在访问中创建仅在报表的查询工具中可见的表?
- mysql - 如何在 codeigniter 框架上进行此查询?
- jenkins - 在 Jenkins 工作中,行为测试在任何失败后停止
- javascript - 我从页面导出了一些变量并尝试导入变量。但它不工作
- python - 回归分析中的“TypeError:列表索引必须是整数或切片,而不是 str”
- azure - 看不到 Azure CDN 的使用情况
- r - 如果最大组值 > 某个值,则过滤 data.table 组中的行
- ios - React-Native、IOS、Firebase - 由于“循环”而无法分发到 AppStore