How to access the properties of a random object in an array?

Question

I have an array of objects. Each of them has the same properties as the others, but different values. I want to access the properties of a random object in this array, but just one time - so when I get that object randomly, it won't be in the array anymore.

So, I make the array with just three objects as beginning, and make a function which will be invoked by clicking on a button. The function creates 2 variable - one is for storing a random number received from the multiplication of Math.random() and the length of the array, rounded by Math.floor().

The second variable is storing one removed item from the array (and it is random every time), and should return it.

The idea is every time when the user clicks on the button to get an unique card, and not to be able to get the same card again. It works but not exactly - sometimes, after clicking the button, the user gets nothing, and the message in the console is "Uncaught TypeError: Cannot read property 'background' of undefined".

Any advice is welcome. Thanks.

Here's my code:

var TarotContainer = [];
TarotContainer[0] = {name: "The Fool", background: "url('theFool.jpg')"}
TarotContainer[1] = {name: "The Magician", background: "url('theMagician.jpg')"}
TarotContainer[2] = {name: "The High Priestess", background: "url('theHighPriestess.jpg')"}

function getRandomTaroCard(){
    var randomCard = Math.floor(Math.random() * TarotContainer.length); 
    var pickedRandomCard = TarotContainer.splice(randomCard, 1);
    document.getElementById('card').style.backgroundImage = pickedRandomCard[randomCard].background;
    document.getElementById('card').style.backgroundRepeat = "no-repeat";

}

I use splice() because I want to use that random item from the array just once, and after that to remove it from it. Is there a better way to do it? — Petya Naumova
– Petya Naumova, Commented Jun 10, 2015 at 14:51
Yeah then that's fine. You should probably accept pgoggijr's answer. — Bergi
– Bergi, Commented Jun 10, 2015 at 15:22

pgoggijr · Accepted Answer · 2015-06-10 14:20:38Z

2

From the Mozilla Javascript Reference on what Array.prototype.splice() returns:

an array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.

This means that you must be taking the first element ([0]) of pickedRandomCard.

Like so:

var TarotContainer = [];
TarotContainer[0] = {name: "The Fool", background: "url('theFool.jpg')"}
TarotContainer[1] = {name: "The Magician", background: "url('theMagician.jpg')"}
TarotContainer[2] = {name: "The High Priestess", background: "url('theHighPriestess.jpg')"}

function getRandomTaroCard(){
    var randomCard = Math.floor(Math.random() * TarotContainer.length); 
    var pickedRandomCard = TarotContainer.splice(randomCard, 1);
    document.getElementById('card').style.backgroundImage = pickedRandomCard[0].background;
    document.getElementById('card').style.backgroundRepeat = "no-repeat";

answered Jun 10, 2015 at 14:20

pgoggijr

4341 gold badge3 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Petya Naumova Over a year ago

So, when the removed item is just one, an array with one item has been created. And it's always 0, because is just one. I think I understand now. Thank you very much for your answer! The confusion came from w3schools, where is written "The splice() method adds/removes items to/from an array, and returns the removed item(s)." - and they don't say, the returned item becomes an array. About the array of objects - is that the correct way of making it, or there's more useful way?

pgoggijr Over a year ago

@Juls I generally try to stay away from w3schools javascript reference. It's often vague and/or misleading. You're understanding seems to be spot on, and splice is the perfect tool for the job as long as you actually need to remove the item from the array

Collectives™ on Stack Overflow

How to access the properties of a random object in an array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related