Перемешать массив карт по нажатию кнопки

Question

Я хочу иметь возможность нажать на кнопку ниже и перемешать карты в моей колоде карт. До сих пор я создал прослушиватель событий, который при нажатии вызывает функцию shuffleCards, которая принимает массив. Массив, который я передал, - это тот, который предоставлен мне в упражнении, который представляет собой массив карточек.

Когда я нажимаю кнопку, ничего не происходит, я знаю, что это как-то связано с областью действия, но я этого не делаюзнаю, как изменить мой код, чтобы сделать это правильно.

Заранее спасибо.

HTML

<button type="button" id="shuffle" class="shuffle" class="btn btn-lg btn-secondary">Shuffle</button>

JAVASCRIPT

// Часть данав упражнении, которое создает колоду карт:

const suit = 'hearts';
const cardsWrapper = document.querySelector('.cards-wrapper');

function createCards() {
  const cards = [];
  // Create an array with objects containing the value and the suit of each card
  for (let i = 1; i <= 13; i += 1) {
    const cardObject = {
      value: i,
      suit,
    };
    cards.push(cardObject);
  }

  // For each dataObject, create a new card and append it to the DOM
  cards.forEach((card, i) => {
    const positionFromLeft = i * 15;
    const cardElement = document.createElement('div');
    cardElement.setAttribute('data-value', card.value);
    cardElement.classList.add('card', `${card.suit}-${card.value}`);
    cardElement.style.left = `${positionFromLeft}px`;
    cardsWrapper.append(cardElement);
  });
}

// часть, написанная мной

const shufflebtn = document.getElementById('shuffle');

shufflebtn.addEventListener("click", () => {
  shuffleCards(cards);
})

function shuffleCards(array) {
  var i = 0
    , j = 0
    , temp = null

  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
  return array
}

Answer 1

произвел некоторые изменения в коде, где я не говорю о html, вместо этого предлагая решение для перемешивания вашей карты. создал кнопку create cards, которая запускает функцию createCards, затем попробуйте щелкнуть по шаффлу и посмотреть консольный журнал, в котором можно увидеть перемешанный массив. Примечание: нажмите на кнопку создания карточек, прежде чем нажимать на перемешивание, поскольку вы можете записать пустой массив Также я изменил область действия карточек, так как она должна быть доступна для других функций

const suit = 'hearts';
var cards = [];

function createCards() {
  for (let i = 1; i <= 13; i += 1) {
    const cardObject = {
      value: i,
      suit,
    };
    cards.push(cardObject);
  }
}

const shufflebtn = document.getElementById('shuffle');
const creatorBtn = document.getElementById('creator');
shufflebtn.addEventListener("click", () => {
 cards = shuffleCards(cards);
})
creatorBtn.addEventListener("click", () => {
  createCards();
})

function shuffleCards(array) {
  var i = 0,
    j = 0,
    temp = null
  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
  console.log(array)
return array;
}

<button type="button" id="shuffle" class="shuffle" class="btn btn-lg btn-secondary">Shuffle</button>

<button type="button" id="creator" class="creator" class="btn btn-lg btn-secondary">create cards</button>