Color Picker, созданный в Javascript, не отображающий значения цвета в DOM - PullRequest
Новая
       34

Color Picker, созданный в Javascript, не отображающий значения цвета в DOM

0 голосов
/ 27 сентября 2019

У меня есть следующая функция, она вызывается из другой функции, используемой для создания простого div.Элемент select визуализируется в DOM, и все элементы ввода option и color присутствуют, но по какой-то причине установка значения на вводе color не работает.Я вывел значения «col.value» как до, так и после присваивания, и каждое из них выдает правильное значение, но когда я его отображаю, все параметры отображаются пустыми, и кажется, что для входного объекта не задано значение.Вот код 

const colourSelector = () => {
            let sel = document.createElement("select");
            let cols = {
                "red":"#ff0000",
                "blue":"#0000ff",
                "green":"#33cc33",
                "orange":"#ff9900",
                "purple":"#800080",
                "brown":"#996633",
                "yellow":"#ffff00",
            };
            for(key in cols) {
                let opt = document.createElement('option');
                opt.value = key;
                let col = document.createElement('input');
                col.type = "color";
                col.value = cols[key];
                opt.appendChild(col);
                console.log(opt);
                sel.appendChild(opt);
            }
            return sel;
        }

А вот пример

выход

1 Ответ

0 голосов
/ 29 сентября 2019

Я думаю, вы хотели бы что-то вроде этого: 

    const colourSelector = () => {
        let sel = document.createElement("select");
        let cols = {
          "red":"#ff0000",
          "blue":"#0000ff",
          "green":"#33cc33",
          "orange":"#ff9900",
          "purple":"#800080",
          "brown":"#996633",
          "yellow":"#ffff00",
        };
        for(key in cols) {
          let opt = document.createElement('option');
          opt.value = key;
          opt.style.backgroundColor = cols[key];
          sel.appendChild(opt);
        }
        return sel;
    }

    document.body.appendChild(colourSelector());
...