我试图从JSON文件中检索一个引用及其作者,我遇到的问题是,一旦我单击按钮一次,则事件被触发,但只有一次,此后不再触发。同样,当我调用$(document).ready()时,按钮根本不会触发。
我知道这与我从JSON文件中收集数据的方式有关(是一个带有文本和作者键的对象数组),然后当我想要检索具有正确作者的新引用时,调用fetch。
// https://type.fit/api/quotes //
// api link for quotes //
const button = document.getElementById('new-quote');
const baseUrl = 'https://type.fit/api/quotes';
let randomNumber = Math.floor(Math.random() * 100);
function getQuote() {
fetch(baseUrl)
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 renderQuoteToPage() {
getQuote();
getAuthor();
}
$('#new-quote').click(renderQuoteToPage);
$(document).ready(renderQuoteToPage);
body {
width: 100%;
height: auto;
}
#outer-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer-wrapper" class="container-fluid">
<div id="quote-box" class="card w-50">
<div class="card-body">
<div class="row">
<div class="col">
<div id="text">
<p id="text-output"></p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<a href="#" id="tweet-quote">Tweet</a>
</div>
<div class="col">
<div id="author">Author</div>
</div>
</div>
<div class="row">
<div class="col">
<button id="new-quote">New quote</button>
</div>
</div>
</div>
</div>
</div>
2条答案
按热度按时间dtcbnfnu1#
在附加处理程序时调用这些函数,因此在没有附加适当的处理程序的情况下调用它们,而且只调用一次。
你只需要函数定义:
getQuote()
时,还需要设置randomNumber
ahy6op9u2#
在你的脚本和它的一些变化。
Example Fiddle