Esto parece que debería ser básico, pero no puedo entender por qué está sucediendo. Recibo un error de referencia no detectado al intentar usar una función de javascript en html.

Creé un botón que generará una nueva cotización, usando una función randomQuote que creé (codepen para en contexto: https://codepen.io/cpmcclure/pen/MWvKaVp ):

nota: no pude averiguar cómo agregar jquery en este ejemplo, pero está incluido en el codepen

 // create array for quotes let quoteList = []; // retrieve quotes and assign them to quoteList array const settings = { "async": false, "crossDomain": true, "url": "https://type.fit/api/quotes", "method": "GET" } $.ajax(settings).done(function (response) { const data = JSON.parse(response); quoteList = data; }); // create display quote variable let displayQuote = {}; // function to assign random quote to displayQuote on a click event function randomQuote() { displayQuote = quoteList[Math.round(Math.random() * 1643)]; }

 <button id="new-quote" onclick="randomQuote()">New Quote</button>

He mirado otros bolígrafos que usan esta misma sintaxis para acceder a una función js en el html, ¿alguna idea de lo que estoy haciendo mal?

Sé que estoy ingresando las comillas correctamente, y si llamo a randomQuote en el JavaScript, hace lo que se supone que debe hacer, parece que tengo un problema para que html y js se comuniquen.