显示随机项目从数组上按一下按钮，没有两个在一排

Display Random Item From Array On Button Click, NO TWO IN A ROW

本文关键字：两个 一排 一下 数组 随机 项目 显示 按钮      更新时间：2023-09-26

我有一个按钮，显示来自数组的引用和作者。我需要按钮来显示随机引用/作者每次按钮被单击。没有两个相同的引用/作者连续出现!

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

你在几个地方重新声明变量，而不是在更高的作用域中使用变量，这就是为什么你不是每次都得到一个新的引用。

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

小提琴

/* 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);
        });
    });
});
相关文章：