Button does not work with a Shuffled Array

Question

I used a code on this site to shuffle an array in Javascript. However, it only shuffles the array when the page refreshes and not when the button is clicked on. I need 'Cars' within the brackets() to make the array shuffle but it's the main problem here. How do I fix this?

//var clickMe = ["Lamborgihni", " Ferrari", " Porsche"," Buggatti", " Toyota", " Mercedes", " Audi"," BMW"];
document.getElementById("finished").onclick = function() {
  randomCars(Cars)
};

function randomCars(Cars) {
  var i = Cars.length,
    t, j;

  // While there remain elements to shuffle...
  while (0 !== i) {

    // Pick a remaining element...
    j = Math.floor(Math.random() * i);
    i -= 1;

    // And swap it with the current element.
    t = Cars[i];
    Cars[i] = Cars[j];
    Cars[j] = t;

  }
  return Cars;
}

var answer1 = ["Lamborgihni", " Ferrari", " Porsche", " Buggatti", " Toyota", " Mercedes", " Audi", " BMW"];
answer1 = randomCars(answer1);
//console.log(answer1);


document.getElementById("finished").innerHTML = answer1;

var firstPlace = document.querySelector(".firstPlace");
var secondPlace = document.querySelector(".secondPlace");
var thirdPlace = document.querySelector(".thirdPlace");

if (answer1 = answer1.length) {
  firstPlace.textContent = answer1[0] + " Came 1st Place";

}

<h1>Car Racing Game with a Table</h1>

<p>We have 8 cars participating in a race. The aim of this exercise is to randomize the order in which the cars finish the race. Pressing a button should trigger this event.</p>

<div class="carRace">
  <p id="finished"></p>
</div>
<button onclick="randomCars(Cars)" type="button" id="clickMe">Click Me</button>

<p class="firstPlace"></p>
<p class="secondPlace"></p>
<p class="thirdPlace"></p>

I don't undestand "if (answer1 = answer1.length)". The answer1 array will never be equal to its lenght (an integer). Also you should use == instead of = for comparision. You are rewritting the answer1 variable. — raul.vila, Apr 14 '18 at 17:30
I haven't define Cars array. As you can tell I'm new to this — JBriggs, Apr 14 '18 at 20:11

score 0 · Answer 1 · answered Apr 14 '18 at 17:35

The main bug is you are using Cars (which is a function parameter) outside its function. You should use answer1:

document.getElementById("finished").onclick = function() {
  randomCars(answer1)
};

But that will not execute this part of the code unless you move it to the randomCars function:

document.getElementById("finished").innerHTML = answer1;

var firstPlace = document.querySelector(".firstPlace");
var secondPlace = document.querySelector(".secondPlace");
var thirdPlace = document.querySelector(".thirdPlace");

if (answer1 == answer1.length) {
  firstPlace.textContent = answer1[0] + " Came 1st Place";
}

score 0 · Accepted Answer · answered Apr 14 '18 at 17:40

I thought you are looking for this If not let me correct where you need help.

var randomCarArray = ["Lamborgihni", " Ferrari", " Porsche", " Buggatti", " Toyota", " Mercedes", " Audi", " BMW"];

function randomCars() {
var temp = randomCarArray;
  var i = temp.length,
    t, j;

  // While there remain elements to shuffle...
  while (0 !== i) {

    // Pick a remaining element...
    j = Math.floor(Math.random() * i);
    i -= 1;

    // And swap it with the current element.
    t = temp[i];
    temp[i] = temp[j];
    temp[j] = t;

  }
  randomCarArray = temp;
  document.getElementById("finished").innerHTML = randomCarArray;
  var firstPlace = document.querySelector(".firstPlace");
   firstPlace.textContent = randomCarArray[0] + " Came 1st Place";
  return randomCarArray;
}
document.getElementById("finished").onclick = function() {
  randomCars()
};
randomCars();

<h1>Car Racing Game with a Table</h1>

<p>We have 8 cars participating in a race. The aim of this exercise is to randomize the order in which the cars finish the race. Pressing a button should trigger this event.</p>

<div class="carRace">
  <p id="finished"></p>
</div>
<button onclick="randomCars('Cars')" type="button" id="clickMe">Click Me</button>

<p class="firstPlace"></p>
<p class="secondPlace"></p>
<p class="thirdPlace"></p>

If possible could you give details line by line from -function randomCars()- to - temp[j] = t; I want to make sure I 100% understand this whenever I come back to it. — JBriggs, Apr 14 '18 at 20:56

Button does not work with a Shuffled Array

2 Answers2