我如何更改动态制作的颜色 div 单击原版 JavaScript?
How do I change the color a dynamically made div on click with vanilla JavaScript?
我正在在线训练营中,他们要求我创建一个记忆游戏并提供了以下代码。第一步是在单击时更改卡片的颜色。仅限香草 JavaScript。
我很确定我需要 select 所有 div,使用循环附加事件侦听器,使用目标属性切换 class 值所以用户可以看到它。问题是,我在运行循环中出错了。
我只需要 运行 的方向、提示和/或有用的指示。不是想找人告诉我答案,就是被难住了。
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.
我认为没有必要。您可以只更改 class 或单击的 div
的样式。
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;
let shuffledColors = shuffle(COLORS);
curDiv.style.background = shuffledColors[0]
}
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>
我正在在线训练营中,他们要求我创建一个记忆游戏并提供了以下代码。第一步是在单击时更改卡片的颜色。仅限香草 JavaScript。
我很确定我需要 select 所有 div,使用循环附加事件侦听器,使用目标属性切换 class 值所以用户可以看到它。问题是,我在运行循环中出错了。
我只需要 运行 的方向、提示和/或有用的指示。不是想找人告诉我答案,就是被难住了。
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.
我认为没有必要。您可以只更改 class 或单击的 div
的样式。
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;
let shuffledColors = shuffle(COLORS);
curDiv.style.background = shuffledColors[0]
}
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>