Random-Code-Generator von API - Variable funktioniert nicht im Code?

Question

Ich habe eine zufällige Quote Generator Website gebaut. Er holt die Zitate von forismatic und hat einen Knopf, um ein neues Zitat zu erhalten, und einen Knopf, um das Zitat zu twittern. Wenn ein neues Angebot eingeht, ändert sich die Farbe der Website.

Ich bin ein Anfänger mit JavaScript und bin auf der Suche nach Tipps zu meinem Code, sowie die Antwort auf die folgende Frage. Ich habe die Variable "request" verwendet, um den JSON von der forismatic API zu bekommen. Wie Sie unten sehen können, muss ich den tatsächlichen Code aus der Variablenanforderung neu erstellen, damit die Website funktioniert. Ich habe mich gefragt, ob irgendjemand erklären kann warum. Vielen Dank.

dies funktioniert:

// initialize JSON request as a variable 
var request = 
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) { 

var words = '“' + json.quoteText; 

var author = '--' + json.quoteAuthor; 

// update quote and author 
$(".quote").html(words); 
$(".author").html(author); 

// update Tweet link 
$("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author); 

// randomize background color variables 
var i = Math.floor(Math.random() * 10 % 7); 
var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c']; 

// change color of each element, with fade 
$("body").animate({"background-color": colors[i]}, 1000); 
$(".btn-primary").animate({"background-color": colors[i]}, 1000); 
$(".quote").animate({"color": colors[i]}, 1000); 
$(".author").animate({"color": colors[i]}, 1000); 
$(".btn-social-icon").animate({"background-color": colors[i]}, 1000); 
}); 


// use request to populate a quote upon page opening 
$(document).ready(function(request) { 
    $("#btn-quote").on("click", function() { 

    // identical to request variable but needs to be repasted to work upon clicks 
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) { 

    var words = '“' + json.quoteText; 

    var author = '--' + json.quoteAuthor; 

    // update quote and author 
    $(".quote").html(words); 
    $(".author").html(author); 

    // update Tweet link 
    $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author); 

    // randomize background color variables 
    var i = Math.floor(Math.random() * 10 % 7); 
    var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c']; 

    // change color of each element, with fade 
    $("body").animate({"background-color": colors[i]}, 1000); 
    $(".btn-primary").animate({"background-color": colors[i]}, 1000); 
    $(".quote").animate({"color": colors[i]}, 1000); 
    $(".author").animate({"color": colors[i]}, 1000); 
    $(".btn-social-icon").animate({"background-color": colors[i]}, 1000); 
     }); 
     }); 
    }); 

dies nicht (Zitat Lasten auf Seite laden, aber nicht aktualisiert, auf Klick) Die einzige Unterschied ist AT "$ (document) .ready" im unteren Bereich des CODE

// initialize JSON request as a variable 
var request = 
$.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) { 

    var words = '“' + json.quoteText; 

    var author = '--' + json.quoteAuthor; 

    // update quote and author 
    $(".quote").html(words); 
    $(".author").html(author); 

    // update Tweet link 
    $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author); 

    // randomize background color variables 
    var i = Math.floor(Math.random() * 10 % 7); 
    var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c']; 

    // change color of each element, with fade 
    $("body").animate({"background-color": colors[i]}, 1000); 
    $(".btn-primary").animate({"background-color": colors[i]}, 1000); 
    $(".quote").animate({"color": colors[i]}, 1000); 
    $(".author").animate({"color": colors[i]}, 1000); 
    $(".btn-social-icon").animate({"background-color": colors[i]}, 1000); 
     }); 


    // use request to populate a quote upon page opening 
    $(document).ready(function(request) { 
    $("#btn-quote").on("click", function(request) { 
    request; 
    }); 
    }); 

Answer 1

Betrachten antrag eine Funktion statt einer variablen:

// initialize JSON request as a variable 
function request() { 
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) { 

     var words = '“' + json.quoteText; 

     var author = '--' + json.quoteAuthor; 

     // update quote and author 
     $(".quote").html(words); 
     $(".author").html(author); 

     // update Tweet link 
     $("#tweet-btn").attr('href', 'http://twitter.com/intent/tweet?text=' + words + author); 

     // randomize background color variables 
     var i = Math.floor(Math.random() * 10 % 7); 
     var colors = ['#7e8f7c', '#7b828f', '#8b7b8f', '#8f7b7b', '#7b7e8f', '#8c7b8f', '#8f7b7c']; 

     // change color of each element, with fade 
     $("body").animate({"background-color": colors[i]}, 1000); 
     $(".btn-primary").animate({"background-color": colors[i]}, 1000); 
     $(".quote").animate({"color": colors[i]}, 1000); 
     $(".author").animate({"color": colors[i]}, 1000); 
     $(".btn-social-icon").animate({"background-color": colors[i]}, 1000); 
    }); 
} 


// use request to populate a quote upon page opening 
$(document).ready(function() { 
    $("#btn-quote").on("click", request); 
});