Why is 'textarea' returning null even on input?

Question

I'm writing a code on speed typing test, and I would like to start the timer when the user inputs the texteare for the first time. However, the textarea doesn't seem to be logging in my input changes and console is returning an error message saying addEventListener cannot return a property of null.

HTML CODE

    
        60
        
            
                Typing Test

JAVA CODE


function startTimer() {
    
    startTime = new Date();
    setInterval(() => {
        document.querySelector('#timer').innerText = getTimerTime()}, 1000);
};

function getTimerTime () {
    return (60 - Math.floor((new Date() - startTime) / 1000));
};

document.querySelector('DOMContentLoaded', onload = generateWordSpan, onkeyup = checkWord, function() {
    if (document.querySelector('#word-input')) {
        document.querySelector('#word-input').addEventListener('onchange', startTimer, {once: true})    
    };
});

Louys Patrice Bessette · Answer

The trick to have an event listener to start an interval is the {once: true} option.
That make the event fire only once.

Then... within the interval, you do what you like.

const maxTime = 60 // seconds

const header = document.querySelector('#timer h1')
const input = document.querySelector("#word-input")

function startTimer() {
  const startTime = new Date();
  let timeIsUP = 0
  const intervalId = setInterval(() => {
    timeIsUP = maxTime - Math.floor((new Date() - startTime) / 1000)
    header.innerText = (timeIsUP);

    if (timeIsUP < 0) {
      clearInterval(intervalId)

      if (input.value.length > 100) {
        header.innerText = "Good work. We'll call you."
      }
      if (input.value.length > 300) {
        header.innerText = "We hire you for monday."
      }
      if (input.value.length > 800) {
        header.innerText = "SuperStar! How many vacation weeks you want?"
      }
      if (input.value.length > 6000) {
        header.innerText = "Cheater!"
      }
    }
  }, 1000);

};

input.addEventListener("keyup", startTimer, {
  once: true
})

#word-input {
  width: 100%;
}


  
    60
  
  
    
      Typing Test

Why is 'textarea' returning null even on input?

1 Answers