Подскажите что делаю не так:
<!DOCTYPE html>
<head>
<title></title>
</head>
<style>
.square {
width:200px;
height:200px;
background-color:yellow;
float: left;
margin-right: 25px;
}
.square-new {
width:300px;
height:300px;
background-color:red;
float: left;
margin-right: 25px;
}
</style>
<body>
<div id="ppp">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<script type="text/javascript">
new changeClass({el: '.square'});
function changeClass(el) {
this.el = document.querySelectorAll(el.el)
this.btPrev = document.querySelectorAll(el.el)
function deselectAll() {
this.el.classList.remove('.square-new ');
};
this.item = function() {
deselectAll();
this.el.classList.add('.square-new');
};
this.btPrev.addEventListener('click', this.item.bind(this));
};
</script>
</body>
</html>