I am trying to make the this phrase switch each time a mouse event occurs. I don’t really care which mouse event, I tried mouseover and others because I thought that would be cool. I am getting something wrong, but I have no idea what is wrong. I already have the tag.

HTML:

<div class="hello-world">
            <button id="hello"> Hello, World! </button>
            <button id="ciao"> Ciao, Mondo!</button>
            <button id="hola"> Hola, Mundo!</button>
            <button id="bonjour"> Bonjour le monde!</button>
           </div>

// Hello, World! 

const hello = document.getElementById("hello");
const ciao = document.getElementById("ciao");
const hola = document.getElementById("hola");
const bonjour = document.getElementById("bonjour");


function disappear(variable) {
    variable.style.display = 'none';
};
function appear(variable) {
    variable.style.display = 'block';
};

hello.addEventListener('click', disappear(hello));
ciao.addEventListener('click', appear(ciao));

ciao.addEventListener('click', disappear(ciao));
hola.addEventListener('click', appear(hola));

hola.addEventListener('click', disappear(hola));
bonjour.addEventListener('click', appear(bonjour));

bonjour.addEventListener('click', disappear(bonjour));
hello.addEventListener('click', appear(hello));