為什么我的按鈕每次都不工作，為什么不打印前6個FIRST？

Question

我正在構建一個小項目：隨機報價生成器。

我將6個引號作為對象存儲在quotes.js文件中。 每個報價對象都有一個quote和source 。 他們中有些人還被citation year 。

我有一個HTML頁面（加上CSS），在屏幕上顯示報價。 還有一個單擊按鈕： click to get a new quote 。

我的代碼在很大程度上運行，當我單擊頁面上的按鈕時，它會隨機加載新的報價。 大多數時候...

但是，我的目標是在顯示數組中的所有引號之前不要多次顯示隨機引號。

這還沒有發生。

我的按鈕隨機不起作用。 我可能會獲得5次成功的按鈕點擊，一次錯過，然后隨機又一次獲得成功。 我不確定為什么會這樣。

您能建議在這里做什么嗎？ 控制台中未捕獲任何錯誤。

實際上，我認為該按鈕每次都可以使用，只是再次加載相同的引用而已。

這是我的主要代碼：

// event listener to respond to "Show another quote" button clicks
// when user clicks anywhere on the button, the "printQuote" function is called
document.getElementById('loadQuote').addEventListener("click", printQuote, false);


// prints quote
function printQuote(){

    var finalQuote = buildQuote();

    document.getElementById('quote-box').innerHTML = finalQuote;
}


// builds message for html, adding on citation and/or year if necessary
function buildQuote(){
    var quote2Print = getQuote(); 
    var message;
    message = "<p class='quote'>" + quote2Print.quote + "</p><p class='source'>" + quote2Print.source;

    if(quote2Print.hasOwnProperty('citation') === true){
        citation = quote2Print.citation;
        message += "<span class='citation'>"  + quote2Print.citation + "</span>";

        if(quote2Print.hasOwnProperty('year') === true){
            year = quote2Print.year;
            message += "<span class='year'>" + quote2Print.year  + "</span></p>";
            return message;

        } else {
            return message += "</p>";
        }

    }else {
        return message;
    }
}


// makes sure that if all 6 quotes haven't been printed, getRandomQuote is called again until a new one is found
function getQuote(){
    var countArray = [];
    var quote;

    if(countArray.length < 6){

        quote = getRandomQuote();

        while(countArray.indexOf(quote) === -1)
        {
            if(countArray.indexOf(quote) === -1) {
                countArray.push(quote);
                return quote;

            } else{
                quote = getRandomQuote();
            }
        } 

    } else {
        quote = getRandomQuote();
        return quote;
    }
}


// With random number, goes through array of quotes and chooses one. random number = index position
function getRandomQuote(){
    var randomQuoteNum = randomQuoteNo();
    var quote = quotes[randomQuoteNum];
    return quote;
}


// Gets a random number
function randomQuoteNo() {
    var randomNumber = Math.floor(Math.random() * 6);
    return randomNumber;
}

Answer 1

做到這一點的簡便方法，當然就是簡便方法。 這就是我所做的。 基本上，您有一個從某處加載的引號數組。 您想要隨機播放（或隨機播放或其他內容）。 然后，您想一次將一個報價添加到要顯示的報價嗎？ 我已經閱讀了您的問題，並為此解決了問題。

這是一個plnkr： http ://plnkr.co/edit/CfdqQv1nGwdaIfYrbXr4?p=preview這是代碼：

var quotes = [];
quotes.push(createQuote(1));
quotes.push(createQuote(2));
quotes.push(createQuote(3));
quotes.push(createQuote(4));
quotes.push(createQuote(5));
quotes.push(createQuote(6));
quotes.push(createQuote(7));

function createQuote(number) {
  return {
    id: number,
    text: "text" + number,
    author: "author" + number
  };
}

var printedQuotes = [];
var nonPrintedQuotes = [];

init();

function init() {
  nonPrintedQuotes = shuffle(quotes);
  printVars();
}

function addQuoteToPrint() {
  if (nonPrintedQuotes.length > 0) {
    console.log("ADD QUOTE!");
    var quote = nonPrintedQuotes.slice(-1, nonPrintedQuotes.length)
    nonPrintedQuotes = nonPrintedQuotes.splice(0, nonPrintedQuotes.length - 1);

    printedQuotes.push(quote[0]);
    printVars();
  } else {
    console.log("No more quotes to print. Sorry. :/")
  }

}

function shuffle(array) {
  var m = array.length;
  var shuffled = array.slice(); // Copy the array

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    var i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    var t = shuffled[m];
    shuffled[m] = shuffled[i];
    shuffled[i] = t;
  }

  return shuffled;
}

function printVars() {
  console.log(quotes);
  console.log(nonPrintedQuotes);
  console.log(printedQuotes);
}

因此，基本上，您可以以某種方式加載引號（我創建了一個小助手功能只是為了輕松創建一些假引號對象）。 然后，您將創建一個經過改組的數組（不知道是否要對原始數組進行排序，因此我將其排序了）。 然后，當您說要報價時，請從改組后的數組中提取一個元素，然后放入打印的數組中。

我使用了費舍爾·耶茨的混洗（按照EvanTrimboli的建議）。 加載所有引號后，可以觸發函數以獲取更多報價。