javascript - 单击按钮将一系列卡片洗牌
问题描述
我希望能够单击下面的按钮并洗牌我的牌组中的牌。到目前为止,我已经创建了一个事件侦听器,单击该事件侦听器会调用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
}
解决方案
对代码进行了一些更改,我不是在谈论 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>
推荐阅读
- javascript - Javascript - 循环遍历关系数组
- python - 如何在函数内部使用我们在函数外部定义的变量
- reactjs - Material UI 的 React 评分组件是如何在表单中使用的?
- flutter - 使用 TextField 时不正确使用 ParentDataWidget
- c++ - 为什么内部类和外部类不能同名?
- python - 如何将 urllib.request.urlopen() 与 add_hotkey() 一起使用?
- css - 适用于没有媒体查询的移动设备的 CSS Grid 单列布局
- django - 当前路径,与其中任何一个都不匹配
- mysql - “SELECT id, title, @natusort:=@natusort + 1 AS ordercount”没有按预期增加
- amazon-web-services - Terraform AWS:无法将先前创建的 root_block_device 与使用 aws_launch_configuration 启动的 AWS EC2 实例重用