Question

我正在构建一个小项目：一个随机引用生成器。

我有6个引号存储为文件quotes.js中的对象。每个引用对象都有quote和source。其中一些还有citation和year。

我有一个html页面（加上CSS），在屏幕上显示一个引号。还有一个按钮可以点击：click to get a new quote。

我的代码基本上运行，当我点击页面上的按钮时，它会随机加载一个新的引号。大多数时候......

但是，我的目标是不要多次显示随机引用，直到首先显示数组中的所有引号。

这还没有发生。

我的按钮，随机，不起作用。我可以获得5次成功的按钮点击，一次未命中，然后随机获得另一次成功。我不确定为什么会发生这种情况。

你能建议在这做什么吗？控制台中没有捕获任何错误。

实际上，我认为按钮IS每次都在工作，它只是再次加载相同的报价。

这是我的主要代码：

// 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的建议）。当您加载了所有引号后，您可以触发功能以获取更多引号。

为什么我的按钮每次都不工作，为什么不打印前6个？

1 个答案: