如何通过JavaScript根据输入值调整对应HTML容器的文本颜色

我编写了一段代码，从用户处获取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];

我的需求是遍历数组，将值为0的对应HTML容器的文本颜色设为红色，否则设为黑色：

for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 0) {
        document.getElementById(/* 对应arr[i]的容器ID */).style.color = "red";
    } else {
        document.getElementById(/* 对应arr[i]的容器ID */).style.color = "black";
    }
}

当前仅指定单个容器ID（如"in1"）时代码可运行，请问如何实现通用的对应容器匹配？

方法1：绑定ID与值的对应关系 #

先创建存储ID和对应值的数组，把每个输入框的ID和解析后的值绑定在一起，遍历的时候直接拿到对应元素操作：

// 定义所有输入框ID
const inputIds = ['in1', 'in2', 'in3', 'in4', 'in5', 'in6', 'in7', 'in8', 'in9', 'in10'];

// 同时获取ID和对应解析后的值
const inputList = inputIds.map(id => {
    const value = document.getElementById(id).value;
    // 根据ID判断解析方式，也可以统一用parseFloat兼容整数和浮点数
    const parsedValue = ['in3','in4','in8','in9'].includes(id) ? parseFloat(value) : parseInt(value);
    return { id, value: parsedValue };
});

// 遍历修改样式
inputList.forEach(item => {
    const element = document.getElementById(item.id);
    element.style.color = item.value === 0 ? 'red' : 'black';
});

方法2：循环时直接构造ID #

因为输入框ID是in+数字的规律命名，循环时可以通过索引直接拼接出对应ID：

// 先简化值的获取逻辑
const arr = [];
for (let i = 1; i <= 10; i++) {
    const id = `in${i}`;
    const value = document.getElementById(id).value;
    const parsedValue = [3,4,8,9].includes(i) ? parseFloat(value) : parseInt(value);
    arr.push(parsedValue);
}

// 遍历修改样式
for (let i = 0; i < arr.length; i++) {
    const targetId = `in${i + 1}`; // 数组索引从0开始，ID数字从1开始，需+1
    const element = document.getElementById(targetId);
    element.style.color = arr[i] === 0 ? 'red' : 'black';
}

方法3：合并值获取与样式修改逻辑 #

直接在一个循环里完成值解析和样式修改，无需单独存数组，代码更精简：

for (let i = 1; i <= 10; i++) {
    const id = `in${i}`;
    const element = document.getElementById(id);
    const value = element.value;
    const parsedValue = [3,4,8,9].includes(i) ? parseFloat(value) : parseInt(value);
    element.style.color = parsedValue === 0 ? 'red' : 'black';
}

内容的提问来源于stack exchange，提问作者Andrey Uebanovic