Сделал генератор градиента но кнопки не работают до выбора цвета

Question

Проблема в том, что, пока я не выберу градус или один какой-то цвет в палитре, кнопка "Рандомный цвет" и "Скопировать" не работают. Как это исправить?

Тут можно посмотреть как это работает

document.querySelector('.wrapper').addEventListener('input', function () {
    let inp1 = document.querySelector('.inp1');
    let inp2 = document.querySelector('.inp2');
    let box = document.querySelector('.box');
    let deg = document.querySelector('.deg');
    let degOut = document.querySelector('.out');
    let btnRandomColor = document.querySelector('.btn-random');
    let copyColor = document.querySelector('.btn-copy')
    let gradient = 'linear-gradient(' + deg.value + 'deg, ' + inp1.value + ', ' + inp2.value + ')';
    degOut.innerHTML = deg.value

    box.style.background = gradient;

    btnRandomColor.onclick = function () {
        let letters = '123456789abcdef'
        let color1 = '#'
        let color2 = '#'

        for (let i = 0; i < 6; i++) {
            color1 += letters[Math.floor(Math.random() * 16)]
        }
        for (let i = 0; i < 6; i++) {
            color2 += letters[Math.floor(Math.random() * 16)]
        }

        inp1.value = color1
        inp2.value = color2;

        deg.value = Math.floor(Math.random() * 361);
        degOut.innerHTML = deg.value;

        gradient = 'linear-gradient(' + deg.value + 'deg, ' + inp1.value + ', ' + inp2.value + ')';

        box.style.background = gradient;
    }
    copyColor.onclick = function () {
        let succes = document.querySelector('.succes');

        let copytext = document.createElement('input');
        copytext.value = gradient;
        document.body.appendChild(copytext);
        copytext.select();
        document.execCommand('copy');
        document.body.removeChild(copytext);

        succes.classList.add('succes_active');

        setTimeout(function () {
            succes.classList.remove('succes_active');
        }, 1500)
    }
})

Answer 1

Вы вешаете обработчики событий на кнопки внутри обработчика события input. Соответственно пока хотя бы раз не произойдёт событие input, кнопки работать не будут.

Т.е. примерно должно получиться что-то такое:

let inp1 = document.querySelector('.inp1');
let inp2 = document.querySelector('.inp2');
let box = document.querySelector('.box');
let deg = document.querySelector('.deg');
let degOut = document.querySelector('.out');
let btnRandomColor = document.querySelector('.btn-random');
let copyColor = document.querySelector('.btn-copy')

document.querySelector('.wrapper').addEventListener('input', function () {
    let gradient = 'linear-gradient(' + deg.value + 'deg, ' + inp1.value + ', ' + inp2.value + ')';
    degOut.innerHTML = deg.value
    box.style.background = gradient;
});

btnRandomColor.onclick = function () {
    // тут не было нуля 
    // из-за чего иногда получалось что-то вроде #8737cundefined
    let letters = '0123456789abcdef'
    let color1 = '#'
    let color2 = '#'

    for (let i = 0; i < 6; i++) {
        color1 += letters[Math.floor(Math.random() * 16)]
    }
    for (let i = 0; i < 6; i++) {
        color2 += letters[Math.floor(Math.random() * 16)]
    }

    inp1.value = color1;
    inp2.value = color2;

    deg.value = Math.floor(Math.random() * 361);
    degOut.innerHTML = deg.value;

    let gradient = 'linear-gradient(' + deg.value + 'deg, ' + inp1.value + ', ' + inp2.value + ')';

    box.style.background = gradient;
}
copyColor.onclick = function () {
    let succes = document.querySelector('.succes');

    let copytext = document.createElement('input');
    copytext.value = gradient;
    document.body.appendChild(copytext);
    copytext.select();
    document.execCommand('copy');
    document.body.removeChild(copytext);

    succes.classList.add('succes_active');

    setTimeout(function () {
        succes.classList.remove('succes_active');
    }, 1500)
}

Буду очень благодарен если подскажите как уменьшить код или где можно сделать как-то по другому

Цвета можно не собирать посимвольно, а генерировать сразу число:

// 16777215 (10) => ffffff (16)
let color = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');

btnRandomColor и copyColor используются всего по одному разу, т.е. для них можно не выделять переменную, а сразу назначать обработчик аналогично тому как сделано с .wrapper

БЛОГ НА HUSL

Сделал генератор градиента но кнопки не работают до выбора цвета

Ответы (1 шт):