I am trying to stop my function from displaying the same object twice when clicking a button

---

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:

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:

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.

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.

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.