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

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

当有人更改简单颜色时，请更改ID为('smplID')的背景，并将其更改为彩色背景('clrfID')的背景。这是我的HTML <div id="previewBG"></div>和Javascript：

       document.getElementById（“ divID”）。onchange = function（）{previewBG（）};

    函数PreviewBG（）
    {
        var simpleColor = document.getElementById（'smplID'）。value; //只是十六进制#FFFFFF
        var ColorfulBG = document.getElementById（'clrfID'）。value; //渐变颜色以背景开头：linear-gradient（45deg...。
        var divID = document.getElementById（'divID'）; // Div im更改背景颜色

        divID.style.background = simpleColor; // style =“ background：#THECOLOR”
        divID.style = ColorfulBG; // style =“ background：linear-gradient（45deg ....”
    }

其仅打印该div的一个ID。
我试图添加一个if( simpleColor ) { divID.style.background = simpleColor; }但什么也没有。
对不起我的英语不好

最佳答案

尼科斯
你的英语很好。不幸的是，我的希腊语太糟糕了，所以我恐怕也要用英语回答！

我认为您需要在if语句中将设置divID的背景色的两行换行，以检查是否提供了simpleColor和ColorfulBG。如果仅给出simpleColor，则将背景设置为：

if(simpleColor && !ColorfulBG) {
divID.style.background = simpleColor;
}

如果还输入了ColorfulBG，请同时使用两个输入来创建渐变：

if (simpleColor && ColorfulBG) {
divID.style.background = 'linear-gradient(45deg,' + simpleColor + ',' +  ColorfulBG + ')';
}

您还可以将onChange事件附加到您的输入，而不是周围的div，如下所示：

<input type="text" id="smplID" placeholder="#CECECE" onchange="previewBG()" />
<input type="text" id="clrfID" placeholder="Gradient color" onchange="previewBG()" />

或毫不客气地像这样：

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

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

document.getElementById("clrfID").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

 //If only a SimpleColor is entered make that the background
if(simpleColor && !ColorfulBG) {
    divID.style.background = simpleColor; // style="background:
    }

//if a SimpleColor and ColorfuLBG is entered make a gradient
 if (simpleColor && ColorfulBG) {
    divID.style.background = 'linear-gradient(45deg,' + simpleColor + ',' +  ColorfulBG + ')'; // style="background: linear-gradient(45deg...."
    }// style="background: linear-gradient(45deg...."
}

div#divID {
    width: 100%;
    height: 100%;
    position: absolute;
}

<div id="divID">
  <input type="text" id="smplID" placeholder="#CECECE" />
  <input type="text" id="clrfID" placeholder="Gradient color" />
</div>