Javascript .click（）只触发一次，之后不再触发，除非我刷新整个页面并且不'；如果调用$（document.ready（），则根本无法呈现

我试图从一个JSON文件中检索一个引号及其作者，我遇到的问题是，一旦我单击按钮一次，事件就会被触发，但只会触发一次，之后就不会再触发了。同样，当我调用$（document）.ready（）时，按钮根本不会启动

我知道这与我从JSON文件（是一个包含文本、作者键的对象数组）收集数据的方式有关，然后在我想要检索具有正确作者的新引用时调用fetch

//https://type.fit/api/quotes //
//用于报价的api链接//
const button=document.getElementById（'new-quote'）；
常量baseUrl=https://type.fit/api/quotes';
让randomNumber=Math.floor（Math.random（）*100）；
函数getQuote（）{
获取（baseUrl）
获取（baseUrl）
.then（response=>response.json（））
.then（quote=>$（“#文本输出”）.text（quote[randomNumber].text））
};
函数getAuthor（）{
获取（baseUrl）
.then（response=>response.json（））
.then（quote=>$（“#作者”）.text（quote[randomNumber].author））
};
函数renderQuoteToPage（）{
getQuote（）；
getAuthor（）；
}
$（“#新报价”）。单击（RenderQuotePage）；
$（文档）.ready（renderQuoteToPage）
正文{
宽度：100%；
高度：自动；
}
#外包装{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}


作者
新报价
您在附加处理程序时正在调用函数，因此在不附加相应处理程序的情况下调用函数，并且只调用一次

您只需要函数定义：

$('#new-quote').click(renderQuoteToPage);
...
$(document).ready(renderQuoteOnPageLoad);

编辑：您还需要在每次调用
getQuote（）
时设置
randomNumber


//https://type.fit/api/quotes //
//用于报价的api链接//
const button=document.getElementById（'new-quote'）；
常量baseUrl=https://type.fit/api/quotes';
让随机数
函数getQuote（）{
randomNumber=Math.floor（Math.random（）*100）；
获取（baseUrl）
.then（response=>response.json（））
.then（quote=>$（“#文本输出”）.text（quote[randomNumber].text））
};
函数getAuthor（）{
获取（baseUrl）
.then（response=>response.json（））
.then（quote=>$（“#作者”）.text（quote[randomNumber].author））
};
函数renderQuoteToPage（）{
getQuote（）；
getAuthor（）；
}
$（“#新报价”）。单击（RenderQuotePage）；
$（文档）.ready（renderQuoteToPage）
正文{
宽度：100%；
高度：自动；
}
#外包装{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}


作者
新报价
脚本中的更改很少，并且脚本已完成

<script>
const button = document.getElementById('new-quote');
const baseUrl = 'https://type.fit/api/quotes';
let randomNumber;

function getQuote() {
  fetch(baseUrl)
  .then(response => response.json())
  .then(quote => $('#text-output').text(quote[randomNumber].text))
   };

function getAuthor() {
  fetch(baseUrl)
  .then(response => response.json())
  .then(quote => $('#author').text(quote[randomNumber].author))
};

function renderQuoteOnPageLoad() {
  randomNumber = Math.floor(Math.random() * 100);
  getQuote();
  getAuthor();
}

$(document).ready(function(){
    renderQuoteOnPageLoad();
});

 $(document).on("click","#new-quote",function(){
    renderQuoteOnPageLoad()
 })
</script>



const button=document.getElementById（'new-quote'）；
常量baseUrl=https://type.fit/api/quotes';
让随机数；
函数getQuote（）{
获取（baseUrl）
.then（response=>response.json（））
.then（quote=>$（“#文本输出”）.text（quote[randomNumber].text））
};
函数getAuthor（）{
获取（baseUrl）
.then（response=>response.json（））
.then（quote=>$（“#作者”）.text（quote[randomNumber].author））
};
函数renderQuoteOnPageLoad（）{
randomNumber=Math.floor（Math.random（）*100）；
getQuote（）；
getAuthor（）；
}
$（文档）.ready（函数（）{
renderQuoteOnPageLoad（）；
});
$（文档）。在（“单击”，“新报价”，函数（）上）{
renderQuoteOnPageLoad（）
})

“可以在codepen上查看画笔…”-请在问题本身中添加一个链接（最好为），而不仅仅是一个指向外部资源的链接，该资源可能因任何原因而不可用->您好，我已经尝试过了，但仍然存在相同的问题。您已经定义了
让randomNumber=Math.floor（Math.random（）*100）在开头，因此每次调用都是相同的，您得到的报价也相同。您需要在每次调用
getQuote（）
时设置它。检查编辑以回答问题