Question 52112 in Javascript Question posted in
A very good W3school tutorial can be found here.

problem with cards shuffle function on button click js – Javascript

enter image description hereI tried to shuffle array of cards
it doesnt work I dont know why

function shuffle(array) {
let curr = array.length, rand;

while (curr != 0) {
    rand = Math.floor(Math.random() * curr);
    curr--;
    [array[curr], array[rand]] = [array[rand], array[curr]];
}

return array;

}

 const shuffleButton = document.querySelector(".shuffleButton");
shuffleButton.onclick = shuffle(cards);
Tags:

2

Answers


  1. 0

    The issue with your code is that you’re calling the shuffle function directly in the click event handler for the shuffleButton, rather than passing in a function reference. This means that the shuffle function is executed immediately when the page is loaded, rather than waiting for the button to be clicked.

    To fix this, you can wrap the call to shuffle inside an anonymous function that gets executed when the button is clicked, like this:

    const shuffleButton = document.querySelector(".shuffleButton");
shuffleButton.onclick = function() {
  shuffle(cards);
};

    This will ensure that the shuffle function is only executed when the button is clicked.

    Also, make sure that the cards array is defined and contains the cards you want to shuffle.

    It’s possible that the click event is not being registered for the button element. You can try using the addEventListener() method instead of assigning the onclick property, like this:

    const shuffleButton = document.querySelector(".shuffleButton");
shuffleButton.addEventListener('click', function() {
  shuffle(cards);
});
    Login or Signup to reply.
  2. 0

    You’re immediately invoking the shuffle function on click of the button. Instead, you should provide a callback function to the onclick property that will be called when the button is clicked.
    modify your code to make it work, Updated Code is

    function shuffle(array) {
  let curr = array.length, rand;

  while (curr != 0) {
      rand = Math.floor(Math.random() * curr);
      curr--;
      [array[curr], array[rand]] = [array[rand], array[curr]];
  }

  return array;
}

const shuffleButton = document.querySelector(".shuffleButton");

shuffleButton.onclick = function() {
  const cards = document.querySelectorAll(".card");
  const shuffledCards = shuffle(Array.from(cards));

  const container = document.querySelector(".container");

  // Remove existing cards from container
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }

  // Add shuffled cards back to container
  shuffledCards.forEach(card => {
    container.appendChild(card);
  });
};

    The callback function gets all the .card elements on the page, shuffles them using the shuffle function, and replaces the existing cards in the .container element with the shuffled cards.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search