爲什麼我的按鈕每次都不工作，爲什麼不打印前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

要對這個簡單的方法是，OFC，最簡單的方式。這就是我所做的。 基本上你有一個從某處加載的引號數組。這你想洗牌（或隨機或其他）。然後你想要一次添加一個報價到要顯示的報價？我已經讀過你的問題，併爲此做了一個解決方案。

這裏是一個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); 
} 

所以基本上，您加載您的報價不知何故（我創建了一個小助手功能，只是輕鬆地創建一些假的報價對象）。然後你創建一個混洗的數組（不知道你是否想保留原始數組，所以我把它排序）。然後當你說你想要一個報價時，你從洗牌數組中取出一個元素並放入打印數組中。

我已經使用了fisher yates shuffle（按照EvanTrimboli的建議）。 當你加載了所有的引號，你可以觸發你的函數獲取更多。