JSFiddle - React, Tailwind, and code Playground

HTML

<button id="hi_button">Say Hi</button>
<button id="bye_button">Say Bye</button>
<div id="output"></div>

JavaScript

let hi = document.getElementById('hi');
let bye = document.getElementById('bye');
let output = document.getElementById('output');
let test = 'goodbye';

function sayHi() {
	output.innerHTML = 'Hi!';
}

function sayBye(text) {
	output.innerHTML = text;
}

// This works fine, no arguments passed with function
// If you typed sayHi in the console it would return the function defenition, not call it.
// So it seems you are passing in a function or defining one, not calling it.
hi_button.addEventListener('click', sayHi);

// Uncomment and this runs without even a click
/* bye.addEventListener('click', sayBye('byebye')); */

// Same behavior
/* bye.addEventListener('click', sayBye(test)); */

// This works as intended
bye_button.addEventListener('click', () => {
  sayBye(test);
});