Всем доброго дня!
Есть тестовой задание: Реализуйте следующую логику в index.js
- при клике по любому квадрату с классом entry
он и все квадраты в которые он вложен изменяют свой цвет. Изменение цвета осуществляется путём изменения CSS
класса по логике "red" -> "green" -> "blue" -> "purple" -> "red"
и далее по кругу (сохраняя класс entry
конечно).
Что дано:
const cls = ["red", "green", "blue", "purple"];
.entry {
display: inline-block;
box-sizing: border-box;
padding: 30px;
border: solid black 2px;
}
.red {
background-color: pink;
}
.green {
background-color: lightgreen;
}
.blue {
background-color: blue;
}
.purple {
background-color: purple;
}
<div class="entry red">
<div class="entry green">
<div class="entry blue">
<div class="entry purple"></div>
</div>
</div>
</div>
С чего я начал?
function myClick(event) {
console.log('click');
console.log(event.target);
}
document.querySelector("div").onclick = myClick;
document.onclick = function(event) {
console.log(event.target.class);
if (event.target.class == 'green') {
console.log('Это зеленый квадрат');
}
}
Логика, как я понял, следующая:
- Отслеживаем по клику div
- Создаем функцию смены класса выбранного div
- магия с погружением и всплытием
- В условии дан массив, значит, я должен его задействовать
По пункту № 3: я должен задействовать event.stopPropagation, правильно?
По пункту № 4: как грамотно через индекс менять класс?