Матрица 8x8 - PullRequest
Новая
       24

Матрица 8x8

0 голосов
/ 01 марта 2019

Я хотел бы иметь матрицу 8x8, в которой я могу щелкнуть по каждому квадрату, и цвет изменится для использования в проекте.

Я сделал 2d массив и всю "доску" 8x8, нотеперь я хочу изменить цвет на клик, хотя я могу думать только о тяжелом коде, например, писать div [row] [column] 64 раза ... 

var div = new Array(8);
for(var i = 0; i<8; i++){
div[i] = new Array(8)
}


for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
    div[i][j] = document.createElement("div");
    div[i][j].style.width = "50px";
    div[i][j].style.height = "50px";
    div[i][j].style.backgroundColor = "white";
    document.getElementById("container").appendChild(div[i][j]);
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
}

div[0][0].onclick = function(){
if(div[0][0].style.backgroundColor == "white"){
    div[0][0].style.backgroundColor = "red"
    d00 = 1
}
else{div[0][0].style.backgroundColor = "white"
d00 = 0
}
}

Я не знаюЯ не хочу писать выше 64 раза, конечно, должен быть лучший способ. 

#container {
margin: auto;
width:400px;
height:400px;
}
#container div {
display:inline-block;
vertical-align:top;
outline: 1px solid black
}

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Вы можете прикрепить событие onclick к родительскому контейнеру и использовать event.target, чтобы получить div, который вызвал событие: 

document.getElementById("container").onclick = function(event){
  if(event.target.style.backgroundColor == "white"){
    event.target.style.backgroundColor = "red";
  }
  else{
    event.target.style.backgroundColor = "white";
  }
}
0 голосов
/ 01 марта 2019

Действительно, есть лучший способ.Внутри цикла for вы уже устанавливаете важные свойства ваших DIV.Это идеальное место для подключения click eventListener, чья функция обратного вызова будет обрабатывать переключение цветов.

Измените цикл for следующим образом: 

var divElement;
for (var i = 0; i < 8; i++) {
  for (var j = 0; j < 8; j++) {
    divElement = document.createElement("div");
    divElement.style.width = "50px";
    divElement.style.height = "50px";
    divElement.style.backgroundColor = "white";
    divElement.addEventListener("click", changeColor);
    document.getElementById("container").appendChild(divElement);
  }

и используйте этоФункция для фактического изменения цвета: 

function changeColor(e) {
  if (e.target.style.backgroundColor == "white") {
    e.target.style.backgroundColor = "red"
    d00 = 1
  } else {
    e.target.style.backgroundColor = "white"
    d00 = 0
  }
}

e.target относится к объекту, который вызвал событие.Простите, я не знаю цели d00 .

...