如何使用 javascript 更改 div 的背景颜色？
[英]How to change background color of a div using javascript?
问题描述
对于我的课程，我正在制作 memory 纸牌游戏。 我在这里要做的就是在单击时更改 div（已在 Javascript 中创建）的背景颜色。 单击 div 时，背景颜色应更改为其 class 名称。 我包含了我的整个代码供您参考，但我遇到问题的部分是 function handleCardClick(event)。 我在做什么错（event.target.style.background-color = selectedColor）？
我敢肯定这是一个简单的修复，但任何帮助表示赞赏。 爱这个社区！
const gameContainer = document.getElementById("game"); const COLORS = [ "red", "blue", "green", "orange", "purple", "red", "blue", "green", "orange", "purple" ]; // here is a helper function to shuffle an array // it returns the same array with values shuffled // it is based on an algorithm called Fisher Yates if you want ot research more function shuffle(array) { let counter = array.length; // While there are elements in the array while (counter > 0) { // Pick a random index let index = Math.floor(Math.random() * counter); // Decrease counter by 1 counter--; // And swap the last element with it let temp = array[counter]; array[counter] = array[index]; array[index] = temp; } return array; } let shuffledColors = shuffle(COLORS); // this function loops over the array of colors // it creates a new div and gives it a class with the value of the color // it also adds an event listener for a click for each card function createDivsForColors(colorArray) { for (let color of colorArray) { // create a new div const newDiv = document.createElement("div"); // give it a class attribute for the value we are looping over newDiv.classList.add(color); // call a function handleCardClick when a div is clicked on newDiv.addEventListener("click", handleCardClick); // append the div to the element with an id of game gameContainer.append(newDiv); } } // TODO: Implement this function. function handleCardClick(event) { // you can use event.target to see which element was clicked let selectedColor = event.target;className. event.target.style;background-color = selectedColor; } // when the DOM loads createDivsForColors(shuffledColors);
#game div { border: 1px solid black; width: 15%; height: 200px; margin: 10px; display: inline-block; }
<.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>
3 个解决方案
解决方案1
1 2020-08-11 05:17:24
event.target.style.backgroundColor = selectedColor;
解决方案2
1 已采纳 2020-08-11 05:18:03
只需检查您的控制台日志并解决它说它有问题的行。
没有style.background-color这样的东西，它是style.backgroundColor
改变;
event.target.style.background-color = selectedColor;
成为;
event.target.style.backgroundColor = selectedColor;
工作片段：
const gameContainer = document.getElementById("game"); const COLORS = [ "red", "blue", "green", "orange", "purple", "red", "blue", "green", "orange", "purple" ]; // here is a helper function to shuffle an array // it returns the same array with values shuffled // it is based on an algorithm called Fisher Yates if you want ot research more function shuffle(array) { let counter = array.length; // While there are elements in the array while (counter > 0) { // Pick a random index let index = Math.floor(Math.random() * counter); // Decrease counter by 1 counter--; // And swap the last element with it let temp = array[counter]; array[counter] = array[index]; array[index] = temp; } return array; } let shuffledColors = shuffle(COLORS); // this function loops over the array of colors // it creates a new div and gives it a class with the value of the color // it also adds an event listener for a click for each card function createDivsForColors(colorArray) { for (let color of colorArray) { // create a new div const newDiv = document.createElement("div"); // give it a class attribute for the value we are looping over newDiv.classList.add(color); // call a function handleCardClick when a div is clicked on newDiv.addEventListener("click", handleCardClick); // append the div to the element with an id of game gameContainer.append(newDiv); } } // TODO: Implement this function. function handleCardClick(event) { // you can use event.target to see which element was clicked let selectedColor = event.target;className. event.target.style;backgroundColor = selectedColor; } // when the DOM loads createDivsForColors(shuffledColors);
#game div { border: 1px solid black; width: 15%; height: 200px; margin: 10px; display: inline-block; }
<.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>
解决方案3
-1 2020-08-11 06:08:27
function myFunction() { var test = document.getElementById('test'); test.style.backgroundColor = "green" }
<.DOCTYPE html> <html> <head> <style>:test { width; 100px:height;300px:background;red;} </style> </head> <body> <div class="test" id="test">testt</div> <button type="button" onclick="myFunction()">Set background color</button> </body> </html>
尝试这个
如何使用javascript值比较更改div元素的背景颜色？
[英]how to change the background color of the div element using javascript value comparison?
无法使用javascript更改多个div onclick的背景颜色
[英]Unable to change background color of multiple div onclick using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.