Почему моя кнопка не работает каждый раз и почему она не печатает первые 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

Going об этом легкий путь, 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); 
} 

Так в основном, вы загрузите ваши котировки каким-то образом (я создал небольшую вспомогательную функцию только легко создавать некоторые поддельные кавычки объекты). Затем вы создаете перетасованный массив из них (не знаю, хотите ли вы сохранить отсортированный массив или нет, поэтому я оставил его отсортированным). Затем, когда вы говорите, что хотите получить цитату, вы берете один элемент из перетасованного массива и помещаете его в печатный массив.

Я использовал перетасовку рыбаков (согласно предложению Эвана Триммоли). Когда вы загрузили все кавычки, вы можете активировать функцию для получения дополнительной информации.