0

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

Betty smith
  • 1
  • If I understand correctly, in your second HTML page those IDs don't exist so your query selector is not returning anything – Zach Jensz Mar 22 '22 at 01:18
  • in newtimer.js you are looking for element with ID #start which you have in the first HTML, but then you load the script in both HTML files where the second one doesn't have an element with that ID, so it throws an error when you try to add an event listener to nothing – Zach Jensz Mar 22 '22 at 01:20
  • so are you suggesting, in order for it to work, I have to create the element in both in HTML documents? – Betty smith Mar 22 '22 at 01:26
  • Well it depends, do you need a submit button in both? Otherwise just use separate scripts for each, and separate out what code is for what page. – Zach Jensz Mar 22 '22 at 01:30
  • If you are trying to listen the element that is dynamically added, you can use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). – vee Mar 22 '22 at 03:04

0 Answers0