Michaly4
@Michaly4
Учусь всю жизнь учусь)

Меняем цвет текста и бэкргаунд блока с помощью JS?

Привет ребята, строго не судите новичка, если там бред ,а лучше если есть время помогите и научите чего не знаю!?
Как должно быть..
Есть две кнопки "Color of text" и "Background color" ,нажимаю одну из них ,появляется блок при выборе цвета должно меняться цвет либо шрифта либо фона(в зависимости на какую кнопку нажал),блок при выборе исчезает так задумано, сейчас с тем что я намутил работает всё только при выборе одной из кнопок в самом начале ,при выборе другой всё становится одни цветом ,и при дальнейшем переходе между кнопками уже ничего не работает((
Наверно тут нужно условие если я нажимаю например "Color of text" выполняется одна функцию ,на "Background color" другая...но я не могу, не знаю как это всё сделать((
Поможет кто??
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
Твоя ошибка в том, что ты при каждом клике на "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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы