Твоя ошибка в том, что ты при каждом клике на "Color of text/Background color" вешаешь обработчики клика по .item
погугли как работает addEventListener. это обработчик. и он всегда висит и проверяет был клик или нет. и сколько раз ты его повесил - столько раз он и будет срабатывать. вот он и срабатывает у тебя дофига раз.
примерно так должно быть:
const getS = selector => document.querySelector(selector);
const color = document.querySelectorAll('.item');
let type = '';
let changedColor = '';
for(i=0;i<color.length;i++){
color[i].addEventListener('click',function name(e) {
console.log(e.target.id);
changedColor = e.target.id;
if ( type === 'color' ) {
changeColor(changedColor);
}
if ( type === 'background' ) {
changeBackground(changedColor);
}
getS('.bottom__cube').classList.add('hide');
});
}
getS('.bottom__btn--color').addEventListener('click',function name(params) {
getS('.bottom__cube').classList.remove('hide');
type = 'color';
});
const bgs = document.querySelectorAll('.item');
getS('.bottom__btn--bg').addEventListener('click',function name(params) {
getS('.bottom__cube').classList.remove('hide');
type = 'background';
});
function changeColor(color) {
getS('.top').style.color = color;
}
function changeBackground(color) {
getS('.top').style.backgroundColor = color;
}
