'cannot read properties of null btn addEventListener

I'm trying to add an event listener to my button, but when I click on it, the console shows me "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"

Here is my code:

const btn = document.querySelector('dice-container')
const tileWithID = document.querySelector('.title-container')
const mainText = document.querySelector('.main-content')

function response(){
fetch('https://api.adviceslip.com/advice')
.then(r => r.json())
.then(responseJSON => console.log(responseJSON)) 
}

btn.addEventListener('click', response())

And this is the HTML:

<body>

<section class="container">
<div class="container-card">
  
    <p class="title-container"></p>
    <p class="main-content">"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis 
     delectus, dolorum eius quaerat iure quod. A fuga, ipsum temporibus"</p>
  
  <img src="./images/pattern-divider-desktop.svg" class="divider" alt="divider">
  <button class="dice-container">
  <img src="./images/icon-dice.svg" class="dice" alt="dice">

  </button>
</div>
</section>
<script src="./index.js"></script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'cannot read properties of null btn addEventListener

Sources

Related Questions