Javascript-форум - Не срабатывает обработчик кнопки

Всем привет, повесил на кнопку обработчик кликов. Почему-то обрабатываются только 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;
}