I’m completely new to listeners in javascript (learning DOM manipulation) and currently I have these functions that turn a box into a new looking box on a click:

let wonderBox = documentation.getElementByID("mysteryBox");
let button = documentation.getElementByID("buttonBox");

function inviteUserClick () {...} //pop up asking if user wants to open a surprise (box) which leads to the next function
function surpriseBox () {...} //modifies style & innerHTML of wonderBox

//listeners
wonderBox.onmouseover = inviteUserClick;
buttonBox.onclick = surpriseBox;

at this point, the surpriseBox function will return a box thats modified from the original box design in the HTML/ CSS, & stays that way until we refresh the browser. How can I have it so that if I click on the surprise box, a function will revert it to the original “mysteryBox” ?

I was trying to use if else statements to make another function for the second click, but I was wondering if there was a method like .onclick and .onmouseover for a double click or similar.