so, I’m having a game, and I want the user to reset the score when he clicks the button, and reset boundaries when he hovers over it.
How can I do it so that he can both, hover and click

function reset_bounderies() {


    let start = document.getElementById("start")
    start.addEventListener("mouseover", function (event) {
        game = true;
        document.querySelectorAll(".boundary:not(.example)").forEach(item => {
            item.classList.remove("youlose")
            document.getElementById("status").innerHTML = `Begin by moving your mouse over the "S".`
        })
    })
    start();

}

and the second function

function reset_game() {

    let start = document.getElementById("start")
    start.addEventListener("click", function (event) {
        game = true;
        score = 0;
        print_score()
        
    })
    start();
}

P.S: I can’t edit html or css file

>Solution :

You can add two differents EventListener to your button

function functionOne(){
  console.log("functionOne")
}

function functionTwo(){
  console.log("functionTwo")
}

const myButton = document.getElementById("myButton")

myButton.addEventListener('click', functionOne)
myButton.addEventListener('mouseover', functionTwo)

<button id="myButton">Click me !</button>