onmouseclick function javascript/html

Question

I'm trying to implement an event handler for a button to change an element's content and I have this just as a sort of test to make sure things work, and they do. However, I'd assume that once I refreshen the page, the original content that the element "generatedMeal" had would reappear, it does not. How would I get my "default" text to reappear upon refreshing?

const button=document.getElementById("generateButton");
const textField= document.getElementById("generatedMeal");

function changeText(){
    textField.innerHTML="hello";
}
button.onmouseclick=changeText();

Answer 1

this should do the trick

    const button=document.getElementById("generateButton");
const textField= document.getElementById("generatedMeal");

function changeText(){
    textField.innerHTML="hello";
}

document.getElementById('generateButton').addEventListener('click', changeText)

If you post your html code I could probably tell you why it didn't work. Cheers