Make three selection same based on randomIndex in javascript

Question

In the code below I have two arrays items and notes. items is an array of objects with a numeric label, and a URL image corresponding to that number.

The notes array has image URL's numbered from 1 to 9.

I select 3 values as random index, and then based off of that I select a label, url from items, and an image from notes.

I'm trying to make the three selection same, i.e.,

If the random index is 3, then..

• the label should be 3
• Url should be https://via.placeholder.com/150x150.jpg?text=image3
• note[randomindex] should be https://via.placeholder.com/150x150.jpg?text=image3

How can I achieve this? What changes do I have to make?

var randomIndex;
var array2 = [];
   ptagstl = document.querySelectorAll('[name="templabel"]');
   ptagturl = document.querySelectorAll('[name="tempurl"]');
   
   
var items = [
{label:'1',url:'https://via.placeholder.com/150x150.jpg?text=image1'},
{label:'2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label:'3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label:'4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label:'5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label:'6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url: 'https://via.placeholder.com/150x150.jpg?text=image7'},
{label:'8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label:'9',url:'https://via.placeholder.com/150x150.jpg?text=image9'}];

var notes = [
'https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4',                                                                                  		      'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'];


var tempimages = [];
var notesselected = [];

array2 = items.slice();
var item;

function rvalue() {

for (var index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() *array2.length)

item = array2[randomIndex];
array2.splice(randomIndex, 1);

tempimages.push({data: item,index: randomIndex });
notesselected.push({data: notes[randomIndex],index: randomIndex});
	
ptagstl[index].textContent = item.label;
ptagturl[index].textContent = item.url;
	
console.log(notes[randomIndex]);
	
      }
    }
rvalue();

<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>

<p id="demo" style="float:right;" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>

Answer 1

The "problem" is splice.

Removing the splice from your loop solves your problem. However, perhaps you don't want to be able to make the same selection, in which case, you should leave it and you are left with the current situation.

When you splice array2 and remove 1 item, the match from index to value changes. For example, if you have [1,2,3] as an array, and you remove the 2, then [1] actually returns 3. This is what you are seeing play out in your code.

Your options are to remove the splice, or alter the way the code is used. If you change its use, then perhaps just slicing a second array for notes and using that is a good idea.

Here is an example:

var randomIndex;
var array2 = [];
   ptagstl = document.querySelectorAll('[name="templabel"]');
   ptagturl = document.querySelectorAll('[name="tempurl"]');
   
   
var items = [
{label:'1',url:'https://via.placeholder.com/150x150.jpg?text=image1'},
{label:'2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label:'3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label:'4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label:'5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label:'6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label: '7',url: 'https://via.placeholder.com/150x150.jpg?text=image7'},
{label:'8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label:'9',url:'https://via.placeholder.com/150x150.jpg?text=image9'}];

var notes = [
'https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4',                                                                                  		      'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'];


var tempimages = [];
var notesselected = [];

array2 = items.slice(); notes2 = notes.slice();
var item;

function rvalue() {

for (var index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() *array2.length)

item = array2[randomIndex];

tempimages.push({data: item,index: randomIndex });
notesselected.push({data: notes2[randomIndex],index: randomIndex});
	
ptagstl[index].textContent = item.label;
ptagturl[index].textContent = item.url;
	
console.log(notes2[randomIndex]);
array2.splice(randomIndex, 1);
notes2.splice(randomIndex, 1);
	
      }
    }
rvalue();

<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>
<p id="demo" name="templabel"></p>

<p id="demo" style="float:right;" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>
<p id="demo" style="float:right" name="tempurl"></p>