我有一段代码可以从用户那里获取 10 个输入值(整数和浮点数):
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);
然后,我将所有输入放入一个数组中,以便更容易使用它们:
var arr = [in1, in2, in3, in4, in5, in6, in7, in8, in9, in10];
这个想法是通过迭代值来调整 HTML 容器的 CSS,并调整特定容器,其值等于 0。
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";
}
}
现在我该如何解决这个问题?
如果我只使用一个容器,比如 in1,我就可以让代码运行,所以如果我把 ("in1") 而不是 p>
(**container of the corresponding arr[i] value**)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您可以按类选择所有输入,然后迭代它们。在按键或更改时添加事件侦听器。在事件回调中,您可以根据要检查的条件更改颜色。在此示例中,输入中的文本根据值的长度改变颜色。
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" } ) }