При клике добавить 2-й класс блока другому элементу?

Question

[Kerhin]

У меня есть элемент с классом .container и допустим 4 блока с общим классом .block и при этом у каждого есть еще свой индивидуальный класс (_black, _blue, _red, _yellow).

Надо, что бы при клике на каждый из элементов c классом .block добавлялся его собственный 2-й класс к элементу .container.

Н-р: Я кликаю на 1-й элемент, у которого есть свой класс (_black) и этот индивидуальный класс добавляется к элементу с классом (.container). После я кликаю по 3-му блоку, и у контейнера удаляется класс _black и заменяется на класс _red.

Дело в том, что я знаю как это сделать на jQuery, но хотелось бы все это реализовать на чистом js. Но к сожалению пока не получается.

<div class="container"></div>

<div class="block _black"></div>
<div class="block _blue"></div>
<div class="block _red"></div>
<div class="block _yellow"></div>

Answer 1

[Mr_Sergo]

https://codepen.io/Mr_Sergo/pen/GVMear

let block = document.querySelectorAll('.block');
let container = document.querySelector('.container');

for(let el of block){
	el.addEventListener('click',()=> {
		container.setAttribute('class',`${container.classList[0]} ${el.classList[1]}`);
	});
}

ну или через делегирование

<div class="container"></div>

<div class="blocks">
	<div class="block _black"></div>
	<div class="block _blue"></div>
	<div class="block _red"></div>
	<div class="block _yellow"></div>
</div>

let container = document.querySelector('.container');

document.querySelector('.blocks').addEventListener('click',e => {
	if(e.target.classList.contains('block')) container.className = `${container.classList[0]} ${e.target.classList[1]}`;
});