Javascript:onchange使用相同的div并从2个不同的id打印

Question

当输入更改时将颜色打印到背景。简单颜色是十六进制颜色，彩色背景是渐变颜色。

当有人更改简单颜色时，会更改具有该 id 的背景 ('smplID')彩色背景也一样('clrfID') 。这是我的 HTML <div id="previewBG"></div>和 JavaScript:

       document.getElementById("divID").onchange = function() {previewBG()};

    function previewBG()
    {
        var simpleColor = document.getElementById('smplID').value; // just a HEX #FFFFFF
        var ColorfulBG = document.getElementById('clrfID').value; // Gradient color starts with background: linear-gradient(45deg....
        var divID = document.getElementById('divID'); // the Div im changing the Background Color

        divID.style.background = simpleColor; // style="background: #THECOLOR"
        divID.style = ColorfulBG; // style="background: linear-gradient(45deg...."
    }

它只打印该 div 的一个 id .. 我尝试添加 if( simpleColor ) { divID.style.background = simpleColor; }但什么也没有。 对不起我的英语

Answer 1

使用 CSS 创建一个名为 .color-a { background: blue; 的类}。使用 javascripts .classList 方法添加/删除/切换容器元素(body 或 section)上的 .color-a CSS 类 或 div 或其他)在您选择的事件上，例如 change。