请查看此代码段

Question

我有4个接收值的输入。它们属于type="text"，因为这些输入可能会收到3*3个输入，并通过之前的函数转换为9。

如何找到具有最大值的输入，忽略null值，以便操纵元素的CSS？

到目前为止我所拥有的：

function whichis() {
    let max = [...document.querySelectorAll("#results input")].sort((a, b) => {
        return b.value === '' ? 1 : (a.value === '' ? -1 : (b.value - a.value))
}, '')[0];

    document.getElementById(max.id).style.border ="1px solid red";
}

<div id="results">
<input type="text" id="a5"><br>
<input type="text" id="b5"><br>
<input type="text" id="c5"><br>
<input type="text" id="d5" onblur="whichis()">
</div>

编辑：感谢@ Ele的回答，我可以确定哪个输入id具有最大值，但是当值为null时，返回最大值。

如何忽略/跳过null值？

Answer 1

您可以使用以下内容查找最大值

基本上，找到你的输入元素，然后按降序对它们进行排序，得到第一个元素。

let max = [...document.querySelectorAll('input')].filter((input) => !isNaN(input.value)).sort((a, b) => {
  return (b.value - a.value);
}, '')[0];

这是假设您的输入字段声明如下：

<input type='number' id='xyz' value='xyzvalue'>

请查看此代码段

＆＃13;

let max = [...document.querySelectorAll('input')].filter((input) => !isNaN(input.value)).sort((a, b) => {
  return (b.value - a.value);
}, '')[0];

document.getElementById(max.id).classList.add('green')
console.log(max.id);

＆＃13;

.green {
  background-color: green
}

＆＃13;

<input type='number' id='id45' value='45'><br>
<input type='number' id='id47' value='47'><br>
<input type='number' id='id59' value='null'><br>
<input type='number' id='id23' value='23'>

＆＃13;

设置具有最大值的输入的CSS

1 个答案:

请查看此代码段