Всем привет, повесил на кнопку обработчик кликов. Почему-то обрабатываются только 2 нажатия кнопки, дальнейшие клики не срабатывают.
По задумке каждое нажатие по кнопке должно ротировать блок
<div class="quart"> на 90 градусов.
<body>
<section class="pixel-art"><p>Пиксель Арт</p></section>
<section class="canvas">
<div class="quart">
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
<div class="default"></div>
</div>
</section>
<section class="result">
<div class="time">Время 00:00</div>
<button class="one">Повернуть</button><br>
<button class="two">Результат</button>
</section>
<section class="total">
<div class="total-canvas"></div>
<div class="total-pix">Пикселей: 0</div>
<div class="total-time">Время 00:00</div>
</section>
</body>
var degree = 90;
// обработчик кликов по пикселям
document.querySelector('.quart').addEventListener('click', function(ev){
if(ev.target.classList.contains('default')){
// добавляем или убираем class="default"
ev.target.classList.toggle('active');
}
});
// обработчик кликов для ротации
document.querySelector('.one').onclick = function() {
//debugger;
degree = degree + 90;
console.log(degree);
var elem = document.querySelector('.quart');
elem.style.transform = 'rotate('+degree+'deg)';
elem.style.transition = '.6s';
}
html, body{
margin: 0;
font-size: 20px;
}
section{
width: 750px;
margin: 0 auto;
text-align: center;
}
button{
padding: 5px 20px;
margin: 10px 0;
font-size: 20px;
cursor: pointer;
}
.pixel-art{
height: 330px;
background: url(bg1.jpg) no-repeat;
background-size: contain;
background-position: center center;
}
p{
color: #000;
font-weight: bold;
position: relative;
top: 85%;
left: -20%;
}
.quart{
width: 440px;
padding: 10px 160px;
}
.quart div{
width: 100px;
height: 100px;
margin: -5px;
display: inline-block;
border: 1px solid #fff;
cursor: pointer;
}
.default{
background: #90C4B8;
}
.active{
background: #000;
}
