Select Random Item (shown in pairs) from Array & Remove It, Restart Once Array is Empty

Question

I'm super newbie in coding and I need help to achieve this code. I'm trying to get a random item (in pairs) from an array and then remove it from this array until user gets to the last item or 60 days have gone from using the service (cookie?)... I have build a script with the help of other questions here in stackoverflow and here is my results so far.

`<script>
var randomizer = document.getElementById("getImgBut");
var dog1 = '/app/wp-content/mediaApp/yo-creo-mi-realidad/01F.jpg';
var dog2 = '/app/wp-content/mediaApp/yo-creo-mi-realidad/01B.jpg';
var dogpics=[dog1,dog2];

var yourPics = [
  dogpics,
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/02F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/02B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/03F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/03B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/04F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/04B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/05F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/05B.jpg'   ],
[   '/app/wp-content/mediaApp/yo-creo-mi-realidad/06F.jpg', '/app/wp-content/mediaApp/yo-creo-mi-realidad/06B.jpg'   ] //This array has 52 cards but I cutted it for example purposes
];

function get_random_number(array){
    return Math.floor(Math.random() * array.length |0);
}  // here is where I have tried to modify with other scripts like the one in this page https://stackoverflow.com/questions/38882487/select-random-item-from-array-remove-it-restart-once-array-is-empty with no success

randomizer.addEventListener("click", function() {
var rand_number = get_random_number(yourPics);
console.log(rand_number);
document.getElementById('img1').src = yourPics[rand_number][0];
document.getElementById('img2').src = yourPics[rand_number][1];
});

var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
  card.classList.toggle('is-flipped');
});
</script>`

Thank you for your help!

Super Newbies welcome! We all were at one point. So clicking your button (with id getImgBut) is supposed to seed your two image elements img1 and img2 is that correct? What is happening - at the time of this posting there is no error msg. — Michael Nelles
– Michael Nelles, Commented Mar 23, 2020 at 0:57
Thanks Nelles, I want to improve the random code so that when a pair of images (02B and 02F are show) they get discarded in a new array "secondArray" so that when this array "firstArray" is empty the secondArray starts again.. the code works but I want to improve it — Pablo J. Chalita
– Pablo J. Chalita, Commented Mar 23, 2020 at 2:09
The "real" post is here blstherapy.com/app/title/prueba-audiosw-pch Password: test — Pablo J. Chalita
– Pablo J. Chalita, Commented Mar 23, 2020 at 2:22

Woody Butler · Accepted Answer · 2020-03-22 22:55:23Z

0

I don't fully understand what you mean by "remove in pairs", but I'll answer presuming you mean you wish to remove the image ending in 02F.jpg at the same time as removing the image ending in 02B.jpg, and then 03F.jpg at the same time as 03B.jpg.

The solution to this that I will propose is that we will structure your data a bit differently to begin with. That is, if those images, the "B image" and "F image" are linked, we could keep them in the same `javascript object. This would look like:

var yourPics = [
  {
    bImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/02F.jpg', 
    fImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/02B.jpg'
  },
  {
    bImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/03F.jpg', 
    fImage: '/app/wp-content/mediaApp/yo-creo-mi-realidad/03B.jpg'
  }...]

This would then be an array of objects, rather than strings. We can access the bImage property of an object with just

myObject = yourPics[0]
myObject.bImage

We could delete one of those objects those at random via splice.

myRandomlyRemovedObject = yourPics.splice(myIndexToDeleteFrom, 1) would remove 1 object from yourPics at position of myIndexToDeleteFrom, which you presumably would choose randomly. myRandomlyRemovedObject would be assigned to the one object we removed.

I think this object based approach is safer since you will know for a fact that you will removed both matching strings at the same time.

answered Mar 22, 2020 at 22:55

Woody Butler

484 bronze badges

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

2 Comments

Pablo J. Chalita Over a year ago

I think I understand your suggestion and from my logic seems perfect but I don't know how to implement it... I'm not asking for you to do the work for me, don't get me wrong but at the stage I am I lack the logic to construct it.

Pablo J. Chalita Over a year ago

The "real" post is here blstherapy.com/app/title/prueba-audiosw-pch Password: test

Collectives™ on Stack Overflow

Select Random Item (shown in pairs) from Array & Remove It, Restart Once Array is Empty

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related