显示嵌套颜色代码的结果

Question

我的项目代码相当大且乏味，所以我编写了更短的代码来更好地解释我的问题。

首先，请查看以下代码：

  function chgrad() {
    // Get the selected radio button
    var selectedRadio = document.querySelector('input[name="radioGroup"]:checked');
  
    // Get colors and rotation values
    var red1 = document.getElementById('red1').value;
    var green1 = document.getElementById('green1').value;
    var blue1 = document.getElementById('blue1').value;
  
    var red2 = document.getElementById('red2').value;
    var green2 = document.getElementById('green2').value;
    var blue2 = document.getElementById('blue2').value;
  
    var rot = document.getElementById('rot').value;
  
    // Set background-size to cover before setting background-image
    document.getElementById('wrapper').style.backgroundSize = 'cover';
  
    // Create gradient string based on selected radio button
    var gradientString;
    if (selectedRadio.value === 'option1') {
      gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "))";
    } else if (selectedRadio.value === 'option2') {
      gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "), rgb(" + red2 + "," + green2 + "," + blue2 + "))";
    }
  
    // Apply the gradient
    document.getElementById('wrapper').style.backgroundImage = gradientString;
  }

 .wrapper {
    width: 100%;
    height: 50px;
    background-color: #000;
    background-image: transparent;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="wrapper" class="wrapper"></div>

    <div class="btn-radio">
        <input type="radio" id="radio1" name="radioGroup" value="option1" checked>
        <label for="radio1">One colors</label>
    </div>

    <div class="btn-radio">
        <input type="radio" id="radio2" name="radioGroup" value="option2">
        <label for="radio2">Two colors</label>
    </div>

    <div class="rotate-change-main">
        <label for="rot">Rotate</label>
        <input type="range" min="0" max="360" oninput="chgrad()" value="0" id="rot">
    </div>

    <br>

    <div id="range_color1" class="range-color">
        <label for="red1">Red</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="red1" value="0" /><br />
        <label for="green1">Green</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="green1" value="0" /><br />
        <label for="blue1">Blue</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="blue1" value="0" /><br />
    </div>

    <br>

    <div id="range_color2" class="range-color">
        <label for="red2">Red</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="red2" value="0" /><br />
        <label for="green2">Green</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="green2" value="0" /><br />
        <label for="blue2">Blue</label>
        <input type="range" min="0" max="255" oninput="chgrad();" id="blue2" value="0" /><br />
    </div>

问题：

正如您在上面的代码中所看到的，当 ID 为 #radio1 的第一个按钮（

一个颜色

）处于活动状态时，更改

#range_color1

框中的值不会导致黑框发生任何变化。但是，一旦激活 ID 为 #radio2 的第二个按钮（

双色

），就会正确创建组合颜色。

我的问题：

我的问题就在这里！

当 ID 为 #radio1 的第一个按钮（

一种颜色

）处于活动状态并且要组合的颜色（渐变）当 ID 为 #radio2 的第二个按钮（

双色

）被激活时，在黑框中，颜色应显示为组合（渐变）。

附加信息：

我已经尝试在 .wrapper 类的 CSS 中将背景图像属性设置为 none。我还尝试为每个选项创建一个单独的渐变字符串，但这也不起作用。

如果您能帮我解决这个问题，我将不胜感激。

感谢您的时间和帮助。

Answer 1

您应该在代码的第一个 if 块中使用两个颜色参数。如果您不想使用颜色作为第二个参数，那么您应该使用“透明”。这样，第一部分将是您想要的颜色，第二部分将是黑色。如果删除属性“background-color: #000;”来自包装类，那么第二部分将是透明的。

if (selectedRadio.value === 'option1') {
  gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "),transparent)";
} else if (selectedRadio.value === 'option2') {
  gradientString = "-webkit-linear-gradient(" + rot + "deg, rgb(" + red1 + "," + green1 + "," + blue1 + "), rgb(" + red2 + "," + green2 + "," + blue2 + "))";
}

CSS

.wrapper {
width: 100%;
height: 50px;
/*background-color: #000;*/
background-image: transparent;
}