Javascript-форум - Поменять класс у выбранного элемента по клику

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Поменять класс у выбранного элемента по клику (https://javascript.ru/forum/dom-window/74145-pomenyat-klass-u-vybrannogo-ehlementa-po-kliku.html)

Поменять класс у выбранного элемента по клику

Подскажите что делаю не так:

<!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>

Sevic,
нужен цикл по всем элементам, нет в js массивного назначения, типа querySelectorAll().addEventListener

Sevic,
возможно вы изобретали делегирование

Цитата:

Сообщение от рони (Сообщение 487573)

Sevic,
возможно вы изобретали делегирование

Да, именно, делегирование!)))

Цитата:

Сообщение от рони (Сообщение 487573)

Sevic,
возможно вы изобретали делегирование

Большое спасибо!

Цитата:

Сообщение от рони (Сообщение 487571)

Sevic,
нужен цикл по всем элементам, нет в js массивного назначения, типа querySelectorAll().addEventListener

если делать через цикл, то можно все методы сделать в одном цикле или на каждый свой цикл?

можно все в одном

это хотите сделать?

у вас там ошибки еще в метод add и remove название класса без точек надо

<div id="ppp">
    <div class="square">1</div>
    <div class="square">1</div>
    <div class="square">1</div>
    <div class="square">1</div>
  </div>
	<script>
document.querySelector('#ppp').onclick = e => e.target.matches('.square') && e.target.classList.toggle('square-new');
	</script>

поменять класс элемента по клику

Цитата:

Сообщение от Sevic

если делать через цикл,

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
#ppp{
    display: flex;
}

.square {
    width:100px;
    height:100px;
    background-color:yellow;
    margin-right: 25px;
    transition: 1s;
}
.square-new {
    width:150px;
    height:150px;
    background-color:red;
    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>
var fn = new changeClass({
    el: ".square",
    cls: "square-new"
});

function changeClass(el) {
    var self = this;
    self.el = document.querySelectorAll(el.el);
    self.Prev = document.querySelector(el.el);
    changeClass.prototype.select = function(elem) {
        this.deselect();
        this.Prev = elem;
        this.Prev.classList.add(el.cls)
    };
    changeClass.prototype.deselect = function() {
        this.Prev.classList.remove(el.cls)
    };
    changeClass.prototype.selectNum = function(num) {
        this.select(this.el[num])
    };
    [].forEach.call(self.el, function(node) {
        node.addEventListener("click", self.select.bind(self, node))
    });
    return self
}
window.setTimeout(function() {
    fn.selectNum(2)
}, 1000);
window.setTimeout(function() {
    fn.deselect()
}, 3000);

</script>
</body>
</html>