html - 为什么 HTML 不在我下面的代码片段中采用 a、b、c 的值？

Question

我已经开始学习 html/css。我一直在尝试在我的网页上创建一个 block ，在其中调整与红色、绿色和蓝色有关的 slider 将根据用户调整的 rgb 值更改显示 block 颜色，但似乎我按预期犯了一些错误显示 block 根本不反射任何颜色!

这是我的代码片段。

<div>
    <form action="/actionPage.html" oninput="a.value=parseInt(a.value);b.value=parseInt(b.value);c.value=parseInt(c.value);">
        0
        <input type="range" id="a" name="a" />
        255
        <br />
        0
        <input type="range" id="b" name="b" />
        255
        <br />
        0
        <input type="range" id="c" name="c" />
        255
        <br />
        <div style="background-color: rgb(a,b,c); height: 50px; width: 200px; border: thin solid black;">                    
        </div>                            
    </form>       
</div>

目前，我的 3 个颜色 slider 下方的框根本不显示任何颜色。我希望该框显示从用户通过选择 slider 位置给出的 rgb 输入组合获得的 rgb 颜色。

Answer 1

Javascript 不是那样工作的，它会自动监听变量是否正在更新。一旦变量达到 DOM , 它是陈旧的，不能改变。如果您检查 div 元素，您会发现背景颜色无效。

相反，表单需要调用一个函数来找到您要更新的元素，然后使用代码更新该元素。

我必须向您的 div 添加 id 才能找到它。我还将 max 添加到您的所有输入范围。

function updateColorDiv(r, g, b) {      
  let colorDiv = document.getElementById('color');
  let backgroundColor = 'rgb('+r+','+g+','+b+')';
  
  colorDiv.style.backgroundColor = backgroundColor;
  colorDiv.innerText = backgroundColor;
}

#color {
  height: 50px;
  width: 200px;
  border: thin solid black; 
}

<div>
    <form action="/actionPage.html" oninput="updateColorDiv(parseInt(a.value), parseInt(b.value), parseInt(c.value))">
        0
        <input type="range" id="a" name="a" min="0" max="255"/>
        255
        <br />
        0
        <input type="range" id="b" name="b" min="0" max="255" />
        255
        <br />
        0
        <input type="range" id="c" name="c" min="0" max="255" />
        255

        <div id="color" />
    </form>       
</div>