Javascript 定时器功能不可用'；不要从eventlistener开始_Javascript_Html

Javascript 定时器功能不可用'；不要从eventlistener开始

javascript html

Javascript 定时器功能不可用'；不要从eventlistener开始,javascript,html,Javascript,Html,我正在尝试制作一个游戏，一旦用户单击“开始”，计时器将启动，用户将被重定向到新页面到目前为止，用户被重定向到一个新页面，但计时器功能没有倒计时。我的控制台日志显示错误 script.js:20未捕获类型错误：无法读取null的属性“addEventListener” 在HTMLDocument。（script.js:20）这是js代码 document.addEventListener('DOMContentLoaded', () => { const timeLeftDisp

我正在尝试制作一个游戏，一旦用户单击“开始”，计时器将启动，用户将被重定向到新页面

到目前为止，用户被重定向到一个新页面，但计时器功能没有倒计时。我的控制台日志显示错误

script.js:20未捕获类型错误：无法读取null的属性“addEventListener” 在HTMLDocument。（script.js:20）

这是js代码

document.addEventListener('DOMContentLoaded', () => {
    const timeLeftDisplay = document.querySelector("#timer");
    const beginbtn = document.querySelector("#beginBtn");

    let secondsLeft = 45

    function countDown(){
        window.location.href = "questions.html"
        setInterval(function(){

            if (secondsLeft <= 0) {
                clearInterval(secondsLeft)
                window.location.href = "https://twitter.com"
            }
            timeLeftDisplay.innerHTML = timeLeftDisplay
            secondsLeft -=1

        },1000)
    }
    beginbtn.addEventListener('click', countDown)
})

document.addEventListener（'DOMContentLoaded'，（）=>{
const timeLeftDisplay=document.querySelector（“计时器”）；
const beginbtn=document.querySelector（“beginbtn”）；
设secondsLeft=45
函数倒计时（）{
window.location.href=“questions.html”
setInterval（函数（）{
if（secondsLeft将timeLeftDisplay.innerHTML=timeLeftDisplay
更改为timeLeftDisplay.innerHTML=secondsLeft；
并在if函数内移动window.href
，并使用id=“timer”添加元素
。如果浏览器在加载第二页时正在刷新，则在每个语句后添加；
分号，JS函数将不再执行。您只需调用倒计时（）函数在DOMContentLoaded listener的第二页上。
第二页上没有id为beginBtn的元素。开始按钮不应显示在第二页上。即使我将其隐藏，我是否仍需要它？问题在于id，因为JS没有找到具有指定id的元素。即使我将id添加到在第二个页面中，如果隐藏元素，计时器将不会启动或显示剩余的秒数。我更改了timeLeftDisplay。但是，在用户单击开始按钮后引导用户进入下一个页面的第一个window.href应位于if语句中。此外，我应该在何处添加id=“timer”？好的，但我如何在第二页上调用函数？//在页面加载时调用函数//确保此页面上存在倒计时函数window.onload=function（）{countDown（）；}
抱歉，我不太清楚在该特定页面上如何调用该函数。两个页面共享相同的js文件。如果我将window.onload函数添加到倒计时函数中，它会一次又一次刷新页面第二页。如果用户开始时浏览器正在刷新，而您使用的是相同的js文件，则可以检查HREF并在用户位于第二页时执行倒计时功能。让url=window.location.HREF；window.onload=function（）{if（url.indexOf（“secondpage”）！==-1{countDown（）；}；
 <body>
    <header class="container mt-5">
        <div class = "row justify-content-end">
            <h6>time:</h6>
            <h6 id = "timer"></h6>
        </div>
      <div class="row justify-content-center">
        <div class="col">
          <h1 class="text-center">questions</h1>
        </div>
      </div>
    </header>
    <main>
      <div class="container mt-5">
        <div class="row justify-content-center">
          <h6 id = "question"></h6>
        </div>
        <div class="row justify-content-center mt-2" id = questionContain>
          <button type="button" class="btn btn-outline-info btn-lg" id = "choiceOne">
           
          </button>
        </div>
      </div>
    </main>
</body>

  <main>
      <div class="container">
        <div class="row justify-content-center">
          <div>
            <button
           
              type="button"
              class="btn btn-outline-info btn-lg"
              id="beginBtn"
            >
              Begin
            </button>
          </div>
        </div>
      </div>
    </main>