addEventListener with if condition not working

I am trying to make a button that triggers the <p> element to be changed from Boing! to Bummtschak!

When the page loads Bummtschak! is displayed, although I did not click and nothing happens in the following click event. I do not know what I am doing wrong.

const para = document.querySelector("p");
const btn = document.getElementById("btn");

btn.addEventListener('click', backTo());
function backTo() {
   if (para.textContent == "Boing!") {
       para.textContent = "Bummtschak!";
   }else{
       para.textContent = "Bummtschak!";
   }
}

The html is:

...
<script src="script.js" defer></script>
</head>
<body>
    <button id="btn"></button>
    <p>Boing!</p>
</body>
</html>

Solution

You should not have the () in the addEventListener

const para = document.querySelector("p");
const btn = document.getElementById("btn");

btn.addEventListener('click', backTo);
function backTo() {
   if (para.textContent == "Boing!") {
       para.textContent = "Bummtschak!";
   }else{
       para.textContent = "Bummtschak!";
   }
}

   <button id="btn"></button>
    <p>Boing!</p>