I'm trying to loop through each button to check if it's been clicked, and if a button has, then call the test() function. However, the function is called and "test" is logged in the console three times before any button is even pressed. Why is the function being ran before the user presses a button?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rock, Paper, Scissors</title>
</head>
<body>
<h1>Rock, Paper, Scissors!</h1>
<button id="ROCK">Rock!</button>
<button id="PAPER">Paper!</button>
<button id="SCISSORS">Scissors!</button>
<script src="javascript.js"></script>
</body>
</html>
function test() {
console.log('test');
}
function playGame() {
//check whether user has clicked button
const btn = document.querySelectorAll('button');
btn.forEach(button => {
button.addEventListener("click", test())});
}