Why don't the corresponding parts of the array match up in my code?

Question

I am working on a project in which I have three arrays and an element in one array corresponds to the element in the other arrays with the same index. I find a random element of one array by generating a random number, but when I search for the elements in the arrays with this random number as the index, they don't correspond. How can I make them correspond?

var qbNames = ['Patrick Mahomes', 'Lamar Jackson', 'Russell Wilson', 'Deshaun Watson', 'Drew Brees', 'Aaron Rodgers', 'Ryan Tannehill', 'Kyler Murray', 'Carson Wentz', 'Matt Ryan', 'Dak Prescott', 'Philip Rivers', 'Tom Brady', 'Ben Roethlisberger', 'Josh Allen', 'Matthew Stafford', 'Kirk Cousins', 'Cam Newton', 'Jared Goff', 'Sam Darnold', 'Derek Carr', 'Jimmy Garoppolo', 'Ryan Fitzpatrick', 'Daniel Jones', 'Drew Lock', 'Gardner MINSHEW', 'Dwayne Haskins', 'Baker Mayfield', 'Jameis Winston', 'Jarrett Stidham', 'Justin Herbert', 'Mitch Trubisky', 'Nick Foles', 'Andy Dalton', 'Mason Rudolph', 'David Blough', 'Devlin Hodges', 'Will Grier'];
  var qbTeams = ['KC', 'BAL', 'SEA', 'HOU', 'NO', 'GB', 'TEN', 'ARI', 'PHI', 'ATL', 'DAL', 'IND', 'TB', 'PIT', 'BUF', 'DET', 'MIN', 'FA', 'LAR', 'NYJ', 'LV', 'SF', 'MIA', 'NYG', 'DEN', 'JAC', 'WAS', 'CLE', 'NO', 'NE', 'LAC', 'CHI', 'CHI', 'DAL', 'PIT', 'DET', 'PIT', 'CAR']
  var qbOveralls = ['99', '97', '98', '95', '95', '92', '92', '90', '88', '86', '86', '86', '86', '86', '85', '84', '84', '83', '82', '82', '82', '82', '81', '80', '80', '80', '80', '79', '79', '79', '78', '77', '76', '76', '74', '73', '73', '72']
  var qb1 = Math.floor(Math.random() * Math.floor(37));
  var qbName1 = qbNames[qb1];
  var qbTeam1 = qbTeams[qb1];
  var qbOverall1 = qbOveralls[qb1];
  document.getElementById("qbDisplay1").innerHTML = qbName1 + '\xa0' + qbTeam1 + '\xa0' + qbOverall1;
  qbNames.splice(qb1, 1);
  var qb2 = Math.floor(Math.random() * Math.floor(36));
  var qbName2 = qbNames[qb2];
  var qbTeam2 = qbTeams[qb2];
  var qbOverall2 = qbOveralls[qb2];
  document.getElementById("qbDisplay2").innerHTML = qbName2 + '\xa0' + qbTeam2 + '\xa0' + qbOverall2;
  qbNames.splice(qb2, 2);
  var qb3 = Math.floor(Math.random() * Math.floor(35));
  var qbName3 = qbNames[qb3];
  var qbTeam3 = qbTeams[qb3];
  var qbOverall3 = qbOveralls[qb3];
  document.getElementById("qbDisplay3").innerHTML = qbName3 + '\xa0' + qbTeam3 + '\xa0' + qbOverall3;

When I execute this code, the Names, Teams, and Overalls elements of the same index don't match up. How can I make it that they do correspond and "qbDisplay" would be for example "Patrick Mahomes KC 99"?

Answer 1

You are only removing the randomly selected index from one of the arrays. You should do that also for the other two:

qbNames.splice(qb1, 1);
qbTeams.splice(qb1, 1); // <--- add this 
qbOveralls.splice(qb1, 1); // <--- add this

Of course, the same is true for the second selection, and the third.

It would be better practice, if you would store the three attributes together in objects, so that you only have one array of objects. Like this:

var stats = [
  {name: 'Patrick Mahomes', team: 'KC', overall: 99 },
  {name: 'Lamar Jackson', team: 'BAL', overall: 97 },
  // ...etc
];

Another thing I would do, is make use of a shuffle function, that shuffles the above array randomly. Once you have that, you can just pick the first three (or how many you need).

Instead of assigning unique id attributes like qbDisplay1 , qbDisplay2 , ...etc, use the class attribute and use the same value for these elements.

I don't see a benefit in the \x0a (non-breaking space), since your data has normal spaces in the name. If you don't want things to wrap around, use CSS styling instead ( white-space: nowrap ).

Here is a little demo:

 function shuffle(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; } var stats = [ {name: 'Patrick Mahomes', team: 'KC', overall: 99 }, {name: 'Lamar Jackson', team: 'BAL', overall: 97 }, {name: 'Russell Wilson', team: 'SEA', overall: 98 }, {name: 'Deshaun Watson', team: 'HOU', overall: 95 }, {name: 'Drew Brees', team: 'NO', overall: 95 }, {name: 'Aaron Rodgers', team: 'GB', overall: 92 }, {name: 'Ryan Tannehill', team: 'TEN', overall: 92 }, {name: 'Kyler Murray', team: 'ARI', overall: 90 }, {name: 'Carson Wentz', team: 'PHI', overall: 88 }, {name: 'Matt Ryan', team: 'ATL', overall: 86 }, ]; let shuffled = shuffle([...stats]); // take a copy before shuffling for (let display of document.querySelectorAll(".qbdisplay")) { let {name, team, overall} = shuffled.pop(); display.textContent = name + ' ' + team + ' ' + overall; }

 <div class="qbdisplay"></div> <div class="qbdisplay"></div> <div class="qbdisplay"></div>

Conversion tool

To convert your current data structure to the one proposed above, you can use the following tool. Copy/paste the three arrays into the input box, and in the output box you'll get the equivalent formatted into the target structure. Don't worry about copy/pasting more than needed (you may leave in/out the var... = part). It will convert quotes to double quotes, so if you have those in a name, you may need to revert that change afterwards:

 let input = document.querySelector("textarea"); let output = document.querySelector("pre"); input.addEventListener("input", refresh); refresh(); function refresh() { let jsons = input.value.replace(/'/g, '"').match(/\[.*?\]/g); let result = []; if (jsons.length === 3) { try { let [names, teams, overalls] = jsons.map(JSON.parse); for (let i = 0; i < names.length; i++) { result.push({ name: names[i], team: teams[i], overall: overalls[i] }); } } catch(e) { output.textContent = e.message; return; } } output.textContent = JSON.stringify(result, null, 2); }

 textarea { width: 100% }

 <textarea> var qbNames = ['Patrick Mahomes', 'Lamar Jackson', 'Russell Wilson', 'Deshaun Watson', 'Drew Brees', 'Aaron Rodgers', 'Ryan Tannehill', 'Kyler Murray', 'Carson Wentz', 'Matt Ryan', 'Dak Prescott', 'Philip Rivers', 'Tom Brady', 'Ben Roethlisberger', 'Josh Allen', 'Matthew Stafford', 'Kirk Cousins', 'Cam Newton', 'Jared Goff', 'Sam Darnold', 'Derek Carr', 'Jimmy Garoppolo', 'Ryan Fitzpatrick', 'Daniel Jones', 'Drew Lock', 'Gardner MINSHEW', 'Dwayne Haskins', 'Baker Mayfield', 'Jameis Winston', 'Jarrett Stidham', 'Justin Herbert', 'Mitch Trubisky', 'Nick Foles', 'Andy Dalton', 'Mason Rudolph', 'David Blough', 'Devlin Hodges', 'Will Grier']; var qbTeams = ['KC', 'BAL', 'SEA', 'HOU', 'NO', 'GB', 'TEN', 'ARI', 'PHI', 'ATL', 'DAL', 'IND', 'TB', 'PIT', 'BUF', 'DET', 'MIN', 'FA', 'LAR', 'NYJ', 'LV', 'SF', 'MIA', 'NYG', 'DEN', 'JAC', 'WAS', 'CLE', 'NO', 'NE', 'LAC', 'CHI', 'CHI', 'DAL', 'PIT', 'DET', 'PIT', 'CAR'] var qbOveralls = ['99', '97', '98', '95', '95', '92', '92', '90', '88', '86', '86', '86', '86', '86', '85', '84', '84', '83', '82', '82', '82', '82', '81', '80', '80', '80', '80', '79', '79', '79', '78', '77', '76', '76', '74', '73', '73', '72'] </textarea> <pre></pre>

Please note that this script must be run after the content is loaded (as happens in the above snippet). For it to work make sure your HTML page has the <script>...</script> block right before the closing </body> . All the other HTML elements should come before the opening of the <script> block.

Answer 2

Your code worked correctly just you have to remove founded item from your three list.

You can make it more organized by using object literals to group the 3 related pieces of information.

`var qbData = [{ name: 'Patrick Mahomes', team: 'KC', overalls: '99' }, { name: 'Lamar Jackson', team: 'BAL', overalls: '97' }, ...];
 var qb1 = Math.floor(Math.random() * Math.floor(37));
 var qbData1 = qbData[qb1];
 document.getElementById("qbDisplay1").innerHTML = qbName1 + '\xa0' + qbTeam1 + '\xa0' + qbOverall1;
 qbData.splice(qb1, 1);`