我试图阻止我的函数在点击一个按钮时两次显示相同的对象。

I have for quite some time now been trying to figure out how I can stop my code to print the same quote twice.

我已经花了很长一段时间试图弄清楚如何停止我的代码来打印两次相同的引用。

Also, when every single object in the array has been printed out, I'd like for it to reset somehow. So that you can browse through the quotes once you've gone through all of them.

而且，当数组中的每个对象都被打印出来时，我希望它以某种方式重新设置。这样你就可以浏览所有的引用了。

This is the essential parts of my code:

这是我的准则的基本部分:

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

The printQuote function simply contains information that's accessing information from my array:

printQuote函数仅仅包含从我的数组中访问信息的信息:

var randomObjectNumber = getRandomQuote();

var html = "<p class='quote'>"
        + quotes[randomObjectNumber].quote +
        "</p>"; 

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

One random object is displayed each time you click the eventListener:

每次单击eventListener时将显示一个随机对象:

function getRandomQuote () {

var randomObjectNumber = Math.floor(Math.random() * quotes.length );

return randomObjectNumber;
}

I have some ideas on how to do this and I have tried them but without success. I tried giving each object a boolean property but I can't really seem to assign each property a boolean value without messing the printQuote function up.

我对如何做到这一点有些想法，我试过了，但没有成功。我试着给每个对象一个布尔属性，但是我似乎不能给每个属性分配一个布尔值而不破坏printQuote函数。

I also tried assigning the object displayed to a different array but the same problem occurred there.

我还尝试将显示的对象分配给另一个数组，但同样的问题也出现了。

I feel like there is some concepts around the eventListener that I don't fully understand, because every time I try to manipulate a displayed object I just end up changing every single object.

我觉得eventListener周围有一些概念我没有完全理解，因为每次我试图操作一个显示对象时，我最终都会改变每个对象。

This is what a typical object in the array looks like by the way:

顺便说一下，数组中的典型对象是这样的:

{quote : "Darkness is merely the absence of light"}

(I also have other properties assigned to the object but i feel like presenting them would be redundant)

(我也有其他属性赋值给对象，但我觉得表示它们是多余的)

If someone could explain, or give me a hint, on how to solve this problem I've been struggling with for some time.

如果有人能解释，或者给我一个提示，关于如何解决这个我已经苦苦挣扎了一段时间的问题。

Some hints would be greatly appreciated!

一些提示将非常感谢!

Have a nice day.

祝你有美好的一天。

Sebastian.

塞巴斯蒂安。

EDIT: All code: https://jsfiddle.net/fusqb7hz/

编辑:所有代码:https://jsfiddle.net/fusqb7hz/

3 个解决方案

#1

Basically what you need:

基本上你需要:

Create a separate array that will store all quotes that you've already used.

创建一个单独的数组来存储您已经使用过的所有引号。
Remove quote from initial array.

从初始数组中删除引号。
Check if you still have quotes in initial array, if not, get them back from backup array.

检查初始数组中是否还有引号，如果没有，从备份数组中获取它们。

#2

The problem is that you call addEventListener twice:

问题是你调用addEventListener两次:

//Let's developers create multiple eventListeners without being redundant.
function onClicking (printFunction) {
document.getElementById('loadQuote').addEventListener("click", printFunction, false);
}
onClicking(printColor);
onClicking(printQuote);

by calling onClicking twice you make the click happen twice, so addEventListener is added twice, meaning one click counts as two.

通过调用两次onclick，可以使单击发生两次，因此添加了两次addEventListener，这意味着一次单击计数为两次。

Change the above code for this:

为此更改上述代码:

//Let's developers create multiple eventListeners without being redundant.
document.getElementById('loadQuote').addEventListener("click", function(){
  printColor();
  printQuote();
});

Here is the jsfiddle:

这是jsfiddle:

https://jsfiddle.net/fusqb7hz/3/

#3

I think the easiest approach is to shuffle your quote array and then go through them one by one. This gives you the next "random" as yet unseen quote. The only part I'm not keen on is this shuffler (a derivation of Fisher Yates) modifies the original quote array. You might not care about that though.

我认为最简单的方法是打乱你的报价数组，然后逐一检查。这将给你下一个未见过的“随机”引用。我唯一不喜欢的部分是这个shuffler (Fisher Yates的派生)修改了原始的引用数组。你可能不关心这个。

// --------------------------------
// A bunch of quotes
// --------------------------------
var quotes = [];
quotes.push({quote : "Darkness is merely the absence of light"});
quotes.push({quote : "quote 2"});
quotes.push({quote : "quote 3"});
quotes.push({quote : "quote 4"});
quotes.push({quote : "quote 5"});
// --------------------------------

// --------------------------------
// Your favorite array shuffle utility
// --------------------------------
var shuffle = function(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
};
// --------------------------------

// --------------------------------
// construct a function to get a random unseen quote until
// all quotes have been seen.  Then reset...
// --------------------------------
var getQuote = (function(quotes, shuffle){
  var current = 0;

  var get = function(){
    if ( !quotes || !quotes.length ) { return ""; }
    if ( current >= quotes.length ){ current = 0; }
    if ( current === 0 ){
      console.log("randomizing quotes...");
      shuffle(quotes);
    }
    return quotes[current++].quote;
  };

  return get;
})(quotes, shuffle);
// --------------------------------

var printQuote = function(){
  document.getElementById('quote').innerText = getQuote();
};

document.getElementById('loadQuote').addEventListener("click", printQuote, false);

<div id="quote"></div>
<button id="loadQuote">get quote</button>

#1