为什么我的按钮每次都不工作，为什么不打印前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的建议）。 当你加载了所有的引号，你可以触发你的函数获取更多。