getQuote() only obtains the quote, it doesn’t display it on the page. This is the code that displays it on the page:

document.getElementById("quoteDisplay").innerHTML = getQuote();

An idea would be to create a new function, displayQuote(), that will get the quote and then display it to the page, and call that when clicking the generate button.

function displayQuote() {
    document.getElementById("quoteDisplay").innerHTML = getQuote();
}

<button id="generate" class="generate" onclick="displayQuote()">Generate</button>

Whenever I refresh the page, the getQuote function works (meaning a new quote is displayed).

However, I would like to get a new quote whenever the user clicks on the Generate Button.

I have a randomQuotes array with 10 quotes typed in.

<button id="generate" class="generate" onclick = "getQuote()">Generate</button>

<script type=text/javascript>
    randomQuotes = [...];

    function getQuote() { 
        let randomQuoteNumber = Math.floor(Math.random()*10);
        return randomQuotes[randomQuoteNumber];
    }

    document.getElementById("quoteDisplay").innerHTML = getQuote();
</script>