0

Как сделать данное действие?

  for (var i = 0; i < 16; i++) {
        document.getElementById('game').innerHTML += '<div class="block"><div>';
    }
    document.getElementById('game').onclick = function (event) {
        console.log(event);
        if (event.target.className=='block') {
            event.target.innerHTML = ""
        }
    }
#game { 
width: 200px; 
height: 200px; 
background: orangered;
 } 
.block { 
width: 50px; 
height: 50px; 
float: left; 
border: 1px solid white; 
box-sizing: border-box;
}
<div id="game">
    
</div>

Пытаюсь сделать сетку 4 на 4, и чтобы при клике менялся цвет элемента, а при еще одном клике возвращался.

2
  • Я так понимаю, цвета у Вас зашиты в стилях? Если - да, добавьте их сюда
    – Dmytro
    4 мая 2018 в 13:07
  • #game { width: 200px; height: 200px; background: orangered; } .block { width: 50px; height: 50px; float: left; border: 1px solid white; box-sizing: border-box; } 4 мая 2018 в 13:09

1 ответ 1

2

  for (var i = 0; i < 16; i++) {
        document.getElementById('game').innerHTML += '<div class="block"><div>';
    }
    document.getElementById('game').onclick = function (event) {
        var target = event.target;
        if (target.className=='block') {
            var color = getComputedStyle(target).backgroundColor;
             if (color == "rgb(0, 0, 0)"){
                target.style.backgroundColor = ""
             } else {
                 event.target.style.backgroundColor= "black"
              }
           
        }
    }
#game { 
width: 200px; 
height: 200px; 
background: orangered;
 } 
.block { 
width: 50px; 
height: 50px; 
float: left; 
border: 1px solid white; 
box-sizing: border-box;
}
<div id="game">
    
</div>

2
  • как раз делал. Смотрите
    – Dmytro
    4 мая 2018 в 13:24
  • спасибо мужик! getComputedStyle(target).backgroundColor - че то сложно,пойду гуглить за эту тему 4 мая 2018 в 13:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.