.click() only firing once then no more after that unless i refresh the whole page and doesn't render at all if i call $(document).ready()

Question

I am trying to retrieve a quote and its author from a JSON file, the problem I am having is that once I click the button once, then the event is fired but only once and no more

Answer 1

You are calling the functions when you attach the handlers, so they are invoked without the appropriate handler being attached, and just once.

You need just the function definition:

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

Edit: You also need to set randomNumber on each getQuote() call

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

  

    


      

        

          

            

          
        
      

      

        

          Tweet
        
        

          
Author
        
      

      

        

          New quote