我在一个在线Boot-Camp中，他们要求我创建一个记忆游戏并提供以下代码。第一步是更改卡的颜色。仅适用于JavaScript。我非常确定我需要选择所有div，使用循环附加事件监听器，使用target属性切换类值，以便用户可以看到它。问题是，我在循环中遇到错误。我只需要一个方向，一个提示，或有用的指针。只是被困住了，不要找人告诉我答案。
约书亚·沃尔夫
const gameContainer = document.getElementById('game');
const COLORS = [
'red',
'blue',
'green',
'orange',
'purple',
'red',
'blue',
'green',
'orange',
'purple',
'indianred', // starting here down in the list, i added these colors.
'darkslateblue',
'limegreen',
'coral',
'rebeccapurple',
'indianred',
'darkslateblue',
'limegreen',
'coral',
'rebeccapurple'
];
function shuffle(array) {
let counter = array.length;
while (counter > 0) {
let index = Math.floor(Math.random() * counter);
counter--;
let temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
}
let shuffledColors = shuffle(COLORS); //array of colors
function createDivsForColors(colorArray) {
for (let color of colorArray) {
const newDiv = document.createElement('div');
newDiv.classList.add(color);
newDiv.addEventListener('click', handleCardClick);
gameContainer.append(newDiv);
}
}
// TODO: Implement this function!
function handleCardClick(e) {
// you can use event.target to see which element was clicked
// create a loop to loop through all the divs
// access the classlist of the currently clicked div // this block of code is what've written
const curDiv = e.target;
const curDivColor = e.target.className;
const divElement = document.querySelector('div');
for (let flippedColor of divElement) {
const index = shuffledColors.length;
index--;
curDiv.classList.toggle([i]);
e.addEventListener;
}
}
createDivsForColors(shuffledColors);#game div {
border: 1px solid black;
width: 15%;
height: 200px;
margin: 10px;
display: inline-block;
border-radius: 0.6rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Memory Game!</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Memory Game!</h1>
<div id="game">
</div>
<script src="script.js"></script>
</body>
</html> I'm pretty sure that I need to select all div's, use a loop to attach an event listener, use the target attribute to toggle the class value so the user can see it.
我认为没有必要。
const gameContainer = document.getElementById('game');
const COLORS = [
'red',
'blue',
'green',
'orange',
'purple',
'red',
'blue',
'green',
'orange',
'purple',
'indianred', // starting here down in the list, i added these colors.
'darkslateblue',
'limegreen',
'coral',
'rebeccapurple',
'indianred',
'darkslateblue',
'limegreen',
'coral',
'rebeccapurple'
];
function shuffle(array) {
let counter = array.length;
while (counter > 0) {
let index = Math.floor(Math.random() * counter);
counter--;
let temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
}
let shuffledColors = shuffle(COLORS); //array of colors
function createDivsForColors(colorArray) {
for (let color of colorArray) {
const newDiv = document.createElement('div');
newDiv.classList.add(color);
newDiv.addEventListener('click', handleCardClick);
gameContainer.append(newDiv);
}
}
// TODO: Implement this function!
function handleCardClick(e) {
// you can use event.target to see which element was clicked
// create a loop to loop through all the divs
// access the classlist of the currently clicked div // this block of code is what've written
const curDiv = e.target;
//const curDivColor = e.target.className;
e.target.style.background = "red"
}
createDivsForColors(shuffledColors);#game div {
border: 1px solid black;
width: 15%;
height: 200px;
margin: 10px;
display: inline-block;
border-radius: 0.6rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Memory Game!</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Memory Game!</h1>
<div id="game">
</div>
<script src="script.js"></script>
</body>
</html>