在單擊按鈕時從數組中顯示隨機項目，一排兩行

Question

我有一個按鈕，用於顯示引用和數組作者。 每次單擊該按鈕時，我需要該按鈕以顯示隨機報價/作者。 連續沒有兩個相同的引號/作者！

window.onload = function()
{
    //assign var to quoteText id contents
    var quoteSpan = document.getElementById("quoteText");

    //assign var to authorText id contents
    var authorSpan = document.getElementById("authorText");

    //assign var to submitButton contents   
    var submitButton = document.getElementById('submit');

    var quotes = [
        {'text': '"Whatever you are, be a good one."', 'author': '-Abraham Lincoln'}, 
        {'text': '"It has been my philosophy of life that difficulties vanish when faced boldly."', 'author': '-Isaac Asimov'}, 
        {'text': '"Enjoy life. There’s plenty of time to be dead."', 'author': '-Anonymous'}, 
        {'text': '"Every moment is a fresh beginning."', 'author': '-T.S. Eliot'}, 
        {'text': '"One day your life will flash before your eyes. Make sure it is worth watching."', 'author': '-Anonymous'}
    ];  

    var oldQuoteIndex = -1; //unfound item in array is -1

    //function determining random quote
    function nextQuote() {

        do { 
            var newQuoteIndex = Math.floor(Math.random() * quotes.length); //picks random quote index from quotes array

        }   while (newQuoteIndex == oldQuoteIndex); //while index of newly chosen quote is the same as the index of old quote

        quoteSpan.innerHTML = quotes[newQuoteIndex].text; //make HTML's quoteText random quote
        authorSpan.innerHTML = quotes[newQuoteIndex].author; //make HTML's authorText random author

        var oldQuoteIndex = newQuoteIndex; //make old index same as new index, so that next time it runs, the WHILE aspect causes DO aspect to randomize
    }

    //when button is clicked, quotation function starts
    submitButton.onclick = nextQuote;

}

Answer 1

您要在多個位置重新聲明變量，而不是在較高范圍中使用變量，這就是為什么每次都不會獲得新報價的原因。

window.onload = function() {
    var quoteSpan     = document.getElementById("quoteText");
    var authorSpan    = document.getElementById("authorText");
    var submitButton  = document.getElementById('submit');
    var oldQuoteIndex = -1;
    var newQuoteIndex = -1;
    var quotes        = [
        {'text': '"Whatever you are, be a good one."', 'author': '-Abraham Lincoln'}, 
        {'text': '"It has been my philosophy of life that difficulties vanish when faced boldly."', 'author': '-Isaac Asimov'}, 
        {'text': '"Enjoy life. There’s plenty of time to be dead."', 'author': '-Anonymous'}, 
        {'text': '"Every moment is a fresh beginning."', 'author': '-T.S. Eliot'}, 
        {'text': '"One day your life will flash before your eyes. Make sure it is worth watching."', 'author': '-Anonymous'}
    ];  

    function nextQuote() {
        while (newQuoteIndex == oldQuoteIndex) {
            newQuoteIndex = Math.floor(Math.random() * quotes.length);
        }

        quoteSpan.innerHTML  = quotes[newQuoteIndex].text; //make HTML's quoteText random quote
        authorSpan.innerHTML = quotes[newQuoteIndex].author; //make HTML's authorText random author

        oldQuoteIndex = newQuoteIndex;
    }
    submitButton.onclick = nextQuote;
}

小提琴

Answer 2

/* getNewQuote might be good in a js file to use on any page */
function getNewQuote(callback){
    var newquote;
    var quotes = getNewQuote.prototype.quotes;
    do{
        newquote = quotes[parseInt(Math.random()*quotes.length)];
    /* if quotes.length == 1 we'll loop forever */ 
    }while( quotes.length > 1 &&  !getNewQuote.prototype.isLastQuote(newquote));
    /* Good idea to check if there is a callback */
    if(callback){ 
        callback(newquote);
    }
}
getNewQuote.prototype.quotes = [
    {'text': '"Whatever you are, be a good one."', 'author': '-Abraham Lincoln'}, 
    {'text': '"It has been my philosophy of life that difficulties vanish when faced boldly."', 'author': '-Isaac Asimov'}, 
    {'text': '"Enjoy life. There’s plenty of time to be dead."', 'author': '-Anonymous'}, 
    {'text': '"Every moment is a fresh beginning."', 'author': '-T.S. Eliot'}, 
    {'text': '"One day your life will flash before your eyes. Make sure it is worth watching."', 'author': '-Anonymous'}
];  
getNewQuote.prototype.lastQuote = null;
getNewQuote.prototype.isLastQuote = function(quote){
    if(!getNewQuote.prototype.lastQuote 
        || ( getNewQuote.prototype.lastQuote.author != quote.author
            && getNewQuote.prototype.lastQuote.text != quote.text )
    ) {
        return getNewQuote.prototype.lastQuote = quote;
    }
    return null;
}
/* End of the getNewQuote */


/* This goes on the page */    
submitButton.onclick = function (){ 
    /* pass getNewQuote a callback function to update the elements with the new quote                 */
    getNewQuote(function(quote){
        quoteSpan.innerHTML = quote.text;
        authorSpan.innerHTML = quote.author;
    });
}
/* if you decide to go with jQuery you can replace the above onclick with this */
$(function(){
    $("#submitButton").click(function (){ 
        getNewQuote(function(quote){
            $("#quote").html(quote.text);
            $("#author").html(quote.author);
        });
    });
});