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

【问题标题】：Javascript: onchange use the same div and print from 2 different idsJavascript：onchange 使用相同的 div 并从 2 个不同的 id 打印
【发布时间】：2018-07-18 00:52:56
【问题描述】：

当输入更改时，将颜色打印到背景。 Simple Color 是 HEX 颜色，Colorful 背景是渐变色。

当有人更改简单颜色时，使用该 ID ('smplID') 更改背景，彩色背景 ('clrfID') 也是如此。这是我的 HTML <div id="previewBG"></div> 和 Javascript：

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

    函数预览BG()
    {
        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; // 样式=“背景：#THECOLOR”
        divID.style = 多彩BG； // style="background: linear-gradient(45deg...."
    }

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

【问题讨论】：

标签： javascript html

【解决方案1】：

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

【讨论】：

【解决方案2】：

尼科斯，你的英语很好；不幸的是，我的希腊语很糟糕，所以恐怕我也必须用英语回应！

我认为您需要将在 if 语句中设置 divID 的背景颜色的两行包装起来，以检查是否提供了 simpleColor 和 ColorfulBG。如果只给出一个简单颜色，只需将背景设置为：

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>

【讨论】：

感谢您的建议，但罗伯特，我有一个渐变颜色生成器，它为我提供 css 代码看看：imgur.com/9bU8Qv1 这就是我使用 divID.style = ColorfulBG 的原因，因为我的 css 代码以 @ 开头987654330@
谢谢。它做了。我已经相应地编辑了我的答案。

【解决方案3】：

或者我想我会使用另一个事件，simpleColor 被打印onChange() 和彩色的我会设置它onMouseup() 我已经测试过并且它工作但如果你有更好的 js 代码我会很感激

【讨论】：