如何定位值最大的text类型input并设置CSS（忽略null值）

嘿，很高兴你已经搞定了定位最大值input ID的部分！关于如何忽略null值的问题，我给你两个实用的解决方案，帮你精准找到真正的最大值对应的元素：

方法1：先过滤无效值，再找最大值 #

这种方法会先把所有空值、null值或者无法转换成有效数字的input排除，只保留有意义的输入项，再从中筛选最大值：

// 获取你的4个text类型input，这里假设用类选择器定位，你可以换成自己的选择器
const inputs = document.querySelectorAll('input[type="text"].your-input-class');

// 处理每个input：过滤无效值，同时把有效输入转成数字并绑定对应元素
const validInputList = Array.from(inputs).filter(input => {
  const trimmedVal = input.value.trim();
  // 排除空值、null，同时确保值能转换成有效数字
  return trimmedVal !== '' && trimmedVal !== 'null' && !isNaN(Number(trimmedVal));
}).map(input => ({
  element: input,
  numValue: Number(input.value)
}));

// 如果存在有效输入，就找到最大值对应的元素
if (validInputList.length > 0) {
  const maxInputItem = validInputList.reduce((prev, current) => {
    return current.numValue > prev.numValue ? current : prev;
  });
  // 对目标input执行CSS操作，比如添加高亮类或者直接修改样式
  maxInputItem.element.classList.add('highlight-max');
  // 或者直接修改行内样式：maxInputItem.element.style.border = '2px solid #2ecc71';
} else {
  // 所有input都是无效值的情况，可按需处理
  console.log('没有有效的输入值哦');
}

方法2：在比较逻辑中直接跳过null值 #

如果你已经有了获取每个input值的逻辑，也可以在比较环节直接排除null项，不用提前过滤：

// 假设你已经通过ID获取了每个input的值，并完成了3*3转9的转换
const inputValues = [
  { id: 'input1', value: document.getElementById('input1').value ? Number(document.getElementById('input1').value) : null },
  { id: 'input2', value: document.getElementById('input2').value ? Number(document.getElementById('input2').value) : null },
  { id: 'input3', value: document.getElementById('input3').value ? Number(document.getElementById('input3').value) : null },
  { id: 'input4', value: document.getElementById('input4').value ? Number(document.getElementById('input4').value) : null }
];

// 过滤掉value为null的项
const validValues = inputValues.filter(item => item.value !== null);

if (validValues.length > 0) {
  // 找到最大值对应的项
  const maxItem = validValues.reduce((prev, curr) => curr.value > prev.value ? curr : prev);
  // 获取对应的input元素并操作CSS
  const targetInput = document.getElementById(maxItem.id);
  targetInput.style.backgroundColor = '#fef9e7';
}

⚠️ 注意：一定要把input的文本值转换成数字后再比较，不然字符串的比较逻辑会出错（比如字符串"10"会被判定为小于"9"）。如果你的3*3转9是在输入时完成的，那直接转Number即可；如果是在比较时才转换，记得把转换逻辑放到过滤步骤里，避免得到NaN影响结果。

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