我的项目代码相当大且乏味，所以我写了一个更短的代码来更好地解释我的问题.
首先，请查看以下代码:
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>Problem:
正如您在上面的代码中看到的那样，当ID为#radio1的第一个按钮(One colors)处于活动状态时，更改#range_color1框中的值不会导致黑匣子发生任何变化.然而，一旦ID为#radio2的第二按钮(Two colors)被激活，组合 colored颜色 就被正确创建.
My question:
我的问题就在这里！
我希望当ID为#radio1的第一个按钮(One colors)处于活动状态时，这些更改以全宽形式反映在黑匣子中(这样只有一种 colored颜色 )，并且当ID为#radio2的第二个按钮(Two colors)处于活动状态时，这些更改将被组合(渐变)在黑匣子中， colored颜色 应显示为组合(渐变).
Additional Information:
我已经try 在.wrapper类的CSS中将background-Image属性设置为无.我还try for each 选项创建单独的渐变字符串，但这也不起作用.
如果您能帮助我解决这个问题，我将不胜感激.
Thank you for your time and assistance.