当前位置： 文江博客话题详情

除了 querySelector 和 getElementId 之外，还有其他方法可以在 javascript 中获取 HTML 元素吗？

发布于 2025-01-15 22:12:56 字数 5691 浏览 3 评论 0原文

我正在尝试将一个 HTML 元素（一个按钮）添加到我的 javascript 文件中。我尝试过 .querySelector 和 .getElementById ，并且我的脚本文件附加在文件底部，就在 body 元素的结束标记之前。但对于每个变量，我都尝试过对它们使用 .addListener 函数，但收到错误“无法读取 null 的属性（读取“addEventListener”）”

这是我的 HTML 代码：

<body>
  <div class="whole">
  <!-- Navbar -->
  <div class="logo">
  <a href="index.html"> <img src="/focus-logo.png" alt="logo" width="100" height="100"></a>
</div>
    
<!-- timer -->
    <figure class="timer">
      <div class="minsSec">
      <span class="mins">0</span>
      <span>:</span>
      <span class="secs">00</span>
     </div> 
      <svg class="progress-ring" height="240" width="240">
        <circle
          class="progress-ring__circle"
          stroke-width="10"
          fill="transparent"
          r="110"
          cx="120"
          cy="120"
        />
      </svg>
      
    </figure>
     <div class="timer__btn">
       <a href="setTime.html"><button class="set">Set</button></a>
    <button id="start">start focus</button>
    <button id="reset">reset</button>
    <button class="pause">pause</button>
    </div>
 <script src="setTime.js"></script>   
<script src="newTimer.js"></script>
 <script src="progressBar.js"></script> 


</div>
</body> 

and 
<body>
 <form action=".">
      <label for="focusTime">Focus Time</label>
      <input type="number" id="focusTimeNum" />
      <label for="breakTime">Break Time</label>
      <input type="number" id="breakTime" />
      <a href="index.html"><button type="submit">Save settings</button></a>
    </form>
    
    <script src="setTime.js"></script>
    <script src="newTimer.js"></script>
    
    </body>

Newtimer.js

const el = document.querySelector(".timer");

const mindiv = document.querySelector(".mins");
const secdiv = document.querySelector(".secs");

const startBtn = document.querySelector("#start");
localStorage.setItem("btn", "focus");

let initial, totalsecs, perc, paused, mins, seconds;

** startBtn.addEventListener("click", () => { **
  let btn = localStorage.getItem("btn");

  if (btn === "focus") {
    mins = +localStorage.getItem("focusTime") || 1;
  } else {
    mins = +localStorage.getItem("breakTime") || 1;
  }

  seconds = mins * 60;
  totalsecs = mins * 60;
  setTimeout(decremenT(), 60);
  startBtn.style.transform = "scale(0)";
  paused = false;                                                                                                                                                                                                                                                                                                                                                          
});

function decremenT() {
  mindiv.textContent = Math.floor(seconds / 60);
  secdiv.textConten

    t = seconds % 60 > 9 ? seconds % 60 : `0${seconds % 60}`;
      if (circle.classList.contains("danger")) {
        circle.classList.remove("danger");
      }
    
      if (seconds > 0) {
        perc = Math.ceil(((totalsecs - seconds) / totalsecs) * 100);
        setProgress(perc);
        seconds--;
        initial = window.setTimeout("decremenT()", 1000);
        if (seconds < 10) {
          circle.classList.add("danger");
        }
      } else {
        mins = 0;
        seconds = 0;
        
        let btn = localStorage.getItem("btn");
    
        if (btn === "focus") {
          startBtn.textContent = "start break";
          startBtn.classList.add("break");
          localStorage.setItem("btn", "break");
        } else {
          startBtn.classList.remove("break");
          startBtn.textContent = "start focus";
          localStorage.setItem("btn", "focus");
        }
        startBtn.style.transform = "scale(1)";
      }
    }

和 setTimer.js


    const focusTimeInput = document.getElementById("focusTimeNum").value;
    const breakTimeInput = document.querySelector("#breakTime");
    const pauseBtn = document.querySelector(".pause");
    
    
    focusTimeInput.value = localStorage.getItem("focusTime");
    breakTimeInput.value = localStorage.getItem("breakTime");
    
    document.querySelector("form").addEventListener("submit", (e) => {
      e.preventDefault();
      localStorage.setItem("focusTime", focusTimeInput.value);
      localStorage.setItem("breakTime", breakTimeInput.value);
    });
    
    document.getElementById("reset").addEventListener("click", () => {
      startBtn.style.transform = "scale(1)";
      clearTimeout(initial);
      setProgress(0);
      mindiv.textContent = 0;
      secdiv.textContent = 0;
    });
    
    pauseBtn.addEventListener("click", () => {
      if (paused === undefined) {
        return;
      }
      if (paused) {
        paused = false;
        initial = setTimeout("decremenT()", 60);
        pauseBtn.textContent = "pause";
        pauseBtn.classList.remove("resume");
      } else {
        clearTimeout(initial);
        pauseBtn.textContent = "resume";
        pauseBtn.classList.add("resume");
        paused = true;
      }
    });

来自 newTimer 的行。 Node.js

startBtn.addEventListener("click", () => {

和 setTimer.js 中的行

document.getElementById("reset").addEventListener("click", () => {

我在后端使用 Node 和 Express

原文

I'm trying to get a HTML element, a button, to my javascript file. I've tried .querySelector and .getElementById and my script file is attached at the bottom of my file just before the closing tag of my body element. but for each of variable I've tried the .addListener function on them but receive the error ' Cannot read properties of null (reading 'addEventListener')'

Here is my HTML Code:

<body>
  <div class="whole">
  <!-- Navbar -->
  <div class="logo">
  <a href="index.html"> <img src="/focus-logo.png" alt="logo" width="100" height="100"></a>
</div>
    
<!-- timer -->
    <figure class="timer">
      <div class="minsSec">
      <span class="mins">0</span>
      <span>:</span>
      <span class="secs">00</span>
     </div> 
      <svg class="progress-ring" height="240" width="240">
        <circle
          class="progress-ring__circle"
          stroke-width="10"
          fill="transparent"
          r="110"
          cx="120"
          cy="120"
        />
      </svg>
      
    </figure>
     <div class="timer__btn">
       <a href="setTime.html"><button class="set">Set</button></a>
    <button id="start">start focus</button>
    <button id="reset">reset</button>
    <button class="pause">pause</button>
    </div>
 <script src="setTime.js"></script>   
<script src="newTimer.js"></script>
 <script src="progressBar.js"></script> 


</div>
</body> 

and 
<body>
 <form action=".">
      <label for="focusTime">Focus Time</label>
      <input type="number" id="focusTimeNum" />
      <label for="breakTime">Break Time</label>
      <input type="number" id="breakTime" />
      <a href="index.html"><button type="submit">Save settings</button></a>
    </form>
    
    <script src="setTime.js"></script>
    <script src="newTimer.js"></script>
    
    </body>

Newtimer.js

const el = document.querySelector(".timer");

const mindiv = document.querySelector(".mins");
const secdiv = document.querySelector(".secs");

const startBtn = document.querySelector("#start");
localStorage.setItem("btn", "focus");

let initial, totalsecs, perc, paused, mins, seconds;

** startBtn.addEventListener("click", () => { **
  let btn = localStorage.getItem("btn");

  if (btn === "focus") {
    mins = +localStorage.getItem("focusTime") || 1;
  } else {
    mins = +localStorage.getItem("breakTime") || 1;
  }

  seconds = mins * 60;
  totalsecs = mins * 60;
  setTimeout(decremenT(), 60);
  startBtn.style.transform = "scale(0)";
  paused = false;                                                                                                                                                                                                                                                                                                                                                          
});

function decremenT() {
  mindiv.textContent = Math.floor(seconds / 60);
  secdiv.textConten

    t = seconds % 60 > 9 ? seconds % 60 : `0${seconds % 60}`;
      if (circle.classList.contains("danger")) {
        circle.classList.remove("danger");
      }
    
      if (seconds > 0) {
        perc = Math.ceil(((totalsecs - seconds) / totalsecs) * 100);
        setProgress(perc);
        seconds--;
        initial = window.setTimeout("decremenT()", 1000);
        if (seconds < 10) {
          circle.classList.add("danger");
        }
      } else {
        mins = 0;
        seconds = 0;
        
        let btn = localStorage.getItem("btn");
    
        if (btn === "focus") {
          startBtn.textContent = "start break";
          startBtn.classList.add("break");
          localStorage.setItem("btn", "break");
        } else {
          startBtn.classList.remove("break");
          startBtn.textContent = "start focus";
          localStorage.setItem("btn", "focus");
        }
        startBtn.style.transform = "scale(1)";
      }
    }

and setTimer.js


    const focusTimeInput = document.getElementById("focusTimeNum").value;
    const breakTimeInput = document.querySelector("#breakTime");
    const pauseBtn = document.querySelector(".pause");
    
    
    focusTimeInput.value = localStorage.getItem("focusTime");
    breakTimeInput.value = localStorage.getItem("breakTime");
    
    document.querySelector("form").addEventListener("submit", (e) => {
      e.preventDefault();
      localStorage.setItem("focusTime", focusTimeInput.value);
      localStorage.setItem("breakTime", breakTimeInput.value);
    });
    
    document.getElementById("reset").addEventListener("click", () => {
      startBtn.style.transform = "scale(1)";
      clearTimeout(initial);
      setProgress(0);
      mindiv.textContent = 0;
      secdiv.textContent = 0;
    });
    
    pauseBtn.addEventListener("click", () => {
      if (paused === undefined) {
        return;
      }
      if (paused) {
        paused = false;
        initial = setTimeout("decremenT()", 60);
        pauseBtn.textContent = "pause";
        pauseBtn.classList.remove("resume");
      } else {
        clearTimeout(initial);
        pauseBtn.textContent = "resume";
        pauseBtn.classList.add("resume");
        paused = true;
      }
    });

The line from newTimer.js

startBtn.addEventListener("click", () => {

and the line from setTimer.js

document.getElementById("reset").addEventListener("click", () => {

I'm using node and express for the backend side

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

流殇

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文