使用 JavaScript 根据输入值调整输入字段 (HTML) 的 (CSS) 中的文本颜色
P粉022140576
2023-09-03 09:53:55
<p>我有一段代码可以从用户那里获取 10 个输入值（整数和浮点数）：</p>
<pre class="brush:php;toolbar:false;">var in1 = parseInt(document.getElementById("in1").value);
var in2 = parseInt(document.getElementById("in2").value);
var in3 = parseFloat(document.getElementById("in3").value);
var in4 = parseFloat(document.getElementById("in4").value);
var in5 = parseInt(document.getElementById("in5").value);
var in6 = parseInt(document.getElementById("in6").value);
var in7 = parseInt(document.getElementById("in7").value);
var in8 = parseFloat(document.getElementById("in8").value);
var in9 = parseFloat(document.getElementById("in9").value);
var in10 = parseInt(document.getElementById("in10").value);</pre>
<p>然后，我将所有输入放入一个数组中，以便更容易使用它们：</p>
<pre class="brush:php;toolbar:false;">var arr = [in1, in2, in3, in4, in5, in6, in7, in8, in9, in10];</pre>
<p>这个想法是通过迭代值来调整 HTML 容器的 CSS，并调整特定容器，其值等于 0。</p>
<pre class="brush:php;toolbar:false;">for (let i = 0; i < arr.length; i++) {
if (arr[i] === 0) {
document.getElementById(**container of the corresponding arr[i] value**).style.color = "red";
} else {
document.getElementById(**container of the corresponding arr[i] value**).style.color = "black";
}
}</pre>
<p>现在我该如何解决这个问题？</p>
<p>如果我只使用一个容器，比如 <code>in1</code>，我就可以让代码运行，所以如果我把 <code>("in1")</code> 而不是 </ p>
<pre class="brush:php;toolbar:false;">(**container of the corresponding arr[i] value**)</pre></p>
您可以按类选择所有输入，然后迭代它们。在按键或更改时添加事件侦听器。在事件回调中，您可以根据要检查的条件更改颜色。在此示例中，输入中的文本根据值的长度改变颜色。
const inputs = document.getElementsByClassName("colorInput") for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener ( "keyup", (event) => { event.target.style.color = event.target.value.length > 10 ? "red" : "green" } ) }