onclick 函数返回引用错误

Onclick function is returning reference error

这看起来应该是基本的,但我不明白为什么会这样。尝试在 html.

中使用 javascript 函数时出现未捕获的引用错误

我使用我创建的 randomQuote 函数创建了一个将生成新报价的按钮(上下文中的代码笔:https://codepen.io/cpmcclure/pen/MWvKaVp):

注意:我不知道如何将 jquery 添加到这个示例中,但它包含在代码笔中

// 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>

我看过其他使用相同语法访问 html 中的 js 函数的笔,知道我做错了什么吗?

我知道我正确地获取了引号,如果我在 JavaScript 中调用 randomQuote,它会执行它应该做的事情,看来我在获取 html和js进行通信。

这可能是因为您正在为 ajax 使用 jquery 而您尚未在代码中添加该库。

{
  "message": "Uncaught ReferenceError: $ is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 23,
  "colno": 1
}