.click () запускается только один раз, затем не более, если только я не переосмыслил sh всей страницы и не отобразился вообще, если я вызвал $ (document) .ready ()

Question

Я пытаюсь получить цитату и ее автора из файла JSON, проблема в том, что, как только я нажимаю кнопку один раз, событие запускается, но только один раз и не более после этого. Точно так же, когда я вызываю $ (document) .ready (), кнопка вообще не срабатывает.

Я знаю, что это связано с тем, как я собираю данные из файла JSON (это массив объектов с текстом, ключами автора), а затем впоследствии вызывать выборку, когда я хочу получить новую цитату с правильным автором.

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

Answer 1

Вы вызываете функции, когда присоединяете обработчики, поэтому они вызываются без присоединения соответствующего обработчика и только один раз.

Вам нужно только определение функции:

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

Редактировать: Вам также нужно установить randomNumber для каждого getQuote() вызова

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

function getQuote() {
  randomNumber = Math.floor(Math.random() * 100);
  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>

Answer 2

Несколько изменений в вашем скрипте и все готово.

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

Пример Fiddle