通过JavaScript点击将多个正方形的颜色分别更改为不同的颜色

我是JavaScript的新手，我试图通过点击它来改变一个正方形的颜色，首先是黄色，然后是橙色，然后是绿色，然后是白色。到目前为止，我只处理了一行，但如果我想添加第二行，第三行，第四行，直到至少100行，它说我不能使用相同的Id-tag。那我还有别的选择吗?

我试着处理文档。getElementsByTagName("container";和document.getElementsByClassName("container";但由于某种原因，颜色在那之后就不再改变了。

我希望有人能帮助我。提前感谢!

let x = document.getElementById("container");
let y = x.children;
let click = 0;
function myFunction() {
for (let i = 0; i < y.length; i++) {
y[i].onclick = function() {
if (click == 0) {
y[i].style.backgroundColor = "yellow";
click = 1;
} else if (click == 1) {
y[i].style.backgroundColor = "orange";
click = 2;
} else if (click == 2) {
y[i].style.backgroundColor = "green";
click = 3;
} else {
y[i].style.backgroundColor = "white";
click = 0;
}
}
}
}
myFunction();

div {
background-color: white;
text-align: center;
float: left;
}
* {
box-sizing: border-box;
}
.header {
border: 1px solid gray;
padding: 15px;
width: 100%;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 20px;
height: 15px;
border: 1px solid grey;
}
.col-1 {
min-width: 20%;
}
.col-2 {
min-width: 4%;
}
.col-3 {
min-width: 4%;
}
.col-4 {
width: 4%;
}
.col-5 {
width: 4%;
}
.col-6 {
width: 4%;
}
.col-7 {
width: 4%;
}
.col-8 {
width: 4%;
}
.col-9 {
width: 4%;
}
.col-10 {
width: 4%;
}
.col-11 {
width: 4%;
}
.col-12 {
width: 4%;
}
.col-13 {
width: 4%;
}
.col-14 {
width: 4%;
}
.col-15 {
width: 4%;
}
.col-16 {
width: 4%;
}
.col-17 {
width: 4%;
}
.col-18 {
width: 4%;
}
.col-19 {
width: 4%;
}
.col-20 {
width: 4%;
}
.col-21 {
width: 4%;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>test</title>
</head>
<body>
<div class="header">Goals</div>
<div class="row">
<div class="col-1">Names:</div>
<div class="col-2">AA</div>
<div class="col-3">AA</div>
<div class="col-4">FA</div>
<div class="col-5">AA</div>
<div class="col-6">OB</div>
<div class="col-7">DB</div>
<div class="col-8">DG</div>
<div class="col-9">MK</div>
<div class="col-10">GM</div>
<div class="col-11">BM</div>
<div class="col-12">SM</div>
<div class="col-13">LN</div>
<div class="col-14">ER</div>
<div class="col-15">SR</div>
<div class="col-16">YS</div>
<div class="col-17">MT</div>
<div class="col-18">ST</div>
<div class="col-19">ST</div>
<div class="col-20">JV</div>
<div class="col-21">EZ</div>
</div>
<div class="row">
<div class="col-1">Ik learn how to count till 10.</div>
<div id="container">
<div class="col-2"> </div>
<div class="col-3"> </div>
<div class="col-4"> </div>
<div class="col-5"> </div>
<div class="col-6"> </div>
<div class="col-7"> </div>
<div class="col-8"> </div>
<div class="col-9"> </div>
<div class="col-10"> </div>
<div class="col-11"> </div>
<div class="col-12"> </div>
<div class="col-13"> </div>
<div class="col-14"> </div>
<div class="col-15"> </div>
<div class="col-16"> </div>
<div class="col-17"> </div>
<div class="col-18"> </div>
<div class="col-19"> </div>
<div class="col-20"> </div>
</div>
</div>

给你想要瞄准的单元格一个共同的类，用getElementsByClassName瞄准它们。

我冒昧地假设您希望每个细胞独立于其他细胞对颜色状态进行排序，因此我省去了共享的click变量，并根据当前状态更改状态…

function myFunction() {
const sequence = ['yellow', 'orange', 'green', 'white'];
let y = [...document.getElementsByClassName("colorme")];
for (let el of y) {
el.onclick = function() {
let index = sequence.findIndex(c => c === el.style.backgroundColor);
index = index === sequence.length - 1 ? 0 : index + 1;
el.style.backgroundColor = sequence[index];
}
}
}
myFunction();

div {
background-color: white;
text-align: center;
float: left;
}
* {
box-sizing: border-box;
}
.header {
border: 1px solid gray;
padding: 15px;
width: 100%;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 20px;
height: 15px;
border: 1px solid grey;
}
.col-1 {
min-width: 20%;
}
.col-2 {
min-width: 4%;
}
.col-3 {
min-width: 4%;
}
.col-4 {
width: 4%;
}
.col-5 {
width: 4%;
}
.col-6 {
width: 4%;
}
.col-7 {
width: 4%;
}
.col-8 {
width: 4%;
}
.col-9 {
width: 4%;
}
.col-10 {
width: 4%;
}
.col-11 {
width: 4%;
}
.col-12 {
width: 4%;
}
.col-13 {
width: 4%;
}
.col-14 {
width: 4%;
}
.col-15 {
width: 4%;
}
.col-16 {
width: 4%;
}
.col-17 {
width: 4%;
}
.col-18 {
width: 4%;
}
.col-19 {
width: 4%;
}
.col-20 {
width: 4%;
}
.col-21 {
width: 4%;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>test</title>
</head>
<body>
<div class="header">Goals</div>
<div class="row">
<div class="col-1">Names:</div>
<div class="col-2">AA</div>
<div class="col-3">AA</div>
<div class="col-4">FA</div>
<div class="col-5">AA</div>
<div class="col-6">OB</div>
<div class="col-7">DB</div>
<div class="col-8">DG</div>
<div class="col-9">MK</div>
<div class="col-10">GM</div>
<div class="col-11">BM</div>
<div class="col-12">SM</div>
<div class="col-13">LN</div>
<div class="col-14">ER</div>
<div class="col-15">SR</div>
<div class="col-16">YS</div>
<div class="col-17">MT</div>
<div class="col-18">ST</div>
<div class="col-19">ST</div>
<div class="col-20">JV</div>
<div class="col-21">EZ</div>
</div>
<div class="row">
<div class="col-1">ten cols</div>
<div id="container">
<div class="colorme col-2"> </div>
<div class="colorme col-3"> </div>
<div class="colorme col-4"> </div>
<div class="colorme col-5"> </div>
<div class="colorme col-6"> </div>
<div class="colorme col-7"> </div>
<div class="colorme col-8"> </div>
<div class="colorme col-9"> </div>
<div class="colorme col-10"> </div>
</div>
</div>
<br/>
<br/>
<div class="row">
<p>cells anyplace else in the dom, may get the same behavior, just give them the .colorme class...</p> 
</div>
<div class="colorme col-2">click me too!</div>

为每个div指定一个id，并在id中传递一个click事件。

<div id="1" class="col-1" onclick="color()">Names:</div>

在javascript中编写一个方法，使用传入的id作为参数并更改颜色:

function color(id) {
let div = document.querySelector('id');
if (div.style.backgroundColor === 'blue') {
div.style.backgroundColor = 'yellow';
}
else if (div.style.backgroundColor = 'yellow') {
div.style.backgroundColor = 'orange';
}
else if (div.style.backgroundColor = 'white') {
div.style.backgroundColor = 'red';
}
else {
div.style.backgroundColor = 'purple';
}
}

我创建了一种可能对您有用的行生成器。不是最漂亮的，但是给你:

let colors = ["white", "yellow", "orange", "green"];
function generateRows() {
let numberOfRows = 4;
let numberOfSquaresPerRow = 20;
for (let i = 1; i <= numberOfRows; i++) {
let row = document.createElement("div");
row.className = "row";
let container = document.createElement("div");
container.className = "container";
row.appendChild(container);
for (let j = 1; j <= numberOfSquaresPerRow; j++) {
let square = document.createElement("div");
square.className = `col-${j}`;
square.setAttribute("color", 0);
square.addEventListener("click", () => {
let color = parseInt(square.getAttribute("color"));
let colorToSet = color < colors.length - 1 ? color + 1 : 0;
square.style.backgroundColor = colors[colorToSet];
square.setAttribute("color", colorToSet);
});
container.appendChild(square);
}
document.body.appendChild(row);
}
}
generateRows();

相关内容

最新更新

热门标签：