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，而是为您的卡洗牌提供了解决方案。创建了一个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>

Umbraco.Core.Composing.Current.Services.ContentService(1234)

只需点击一下按钮，即可洗牌机

1 个答案: