Question

我需要创建一个HTML页面，添加三个文本框，用户将在其中输入三个数字：a，b，c。

然后我会有一个按钮，点击它，将计算三个最大数量。结果将显示在警报中。如果用户没有输入一个或两个数字，程序不应该崩溃。

案例：

如果没有引入号码，则应显示一条消息，要求用户输入至少一个号码。
如果只引入三个中的一个，则该数字是最大数量。
如果引入两个号码，则应显示两个号码中的最大值。
如果引入三个号码，则应显示三个号码中的最大值。

我弹出NaN警告，但我需要显示"input at least one number"的提醒。这就是我尝试过的：

function max() {
  var a = parseInt(document.getElementById("num1").value);
  var b = parseInt(document.getElementById("num2").value);
  var c = parseInt(document.getElementById("num3").value);
  var max = 0;

  var end = Math.max(a, b, c) || Math.max(a, b) || Math.max(a) || Math.max(a, c) || Math.max(b, c);


  alert(end);

  nbs = [a, b, c].filter(nb => !isNaN(nb));

  if (isNaN(a) && isNaN(b) && isNaN(c)) {
    alert("Input at least one number");
  } else {
    console.log(Math.max(nbs));
  }
}

我该怎么办？

Answer 1

您可以通过几行代码实现此目的：

首先选择所有input个元素并将它们放在一个数组中。将它们映射到输入值的数组。所有这些都通过parseInt()传递，无论它们是否为整数：
```
let nbs = [...document.querySelectorAll('.nb')].map(e => parseInt(e.value))
```
然后我过滤它们只保留整数。小心，因为typeof NaN == "number"是真的......所以也要确保它不是NaN：
```
let nbsF = nbs.filter(e => ( typeof e == "number" && !isNaN(e) ) )
```
最后通过检查数组是否至少有一个对象（即至少有一个数字，因为它已被过滤为仅包含数字）来返回结果。如果数组不包含任何数字，则返回一个字符串：
```
return nbsF.length ? Math.max(...nbsF) : 'input at least one number'
```

＆＃13;

let max = function() {

  let nbs = [...document.querySelectorAll('.nb')].map(e => parseInt(e.value))
  
  let nbsF = nbs.filter(e => ( typeof e == "number" && !isNaN(e) ) )
  
  return nbsF.length ? Math.max(...nbsF) : 'input at least one number'
  
}

＆＃13;

<input class="nb" type="text">
<input class="nb" type="text">
<input class="nb" type="text">

<button onclick="console.log(max())">Get maximum</button>

＆＃13;

对于有兴趣的人：

我使用第一部分中的spread syntax将NodeList HTMLElement s（由document.querySelectorAll()提供）转换为实际对象Array的{{1}}。这样我可以使用HTMLElement中的.map()和.filter()方法。
在return语句中，我使用的是ternary operator，它是Array语句的缩写。在这种情况下：
```
if...else
```
相当于：
```
return nbsF.length ? Math.max(...nbsF) : 'input at least one number' 
```
使用非常方便。
正如lucchi在评论中所说：我们可以：
而不是返回if(nbsF.length) { return Math.max(...nbsF) } else { return 'input at least one number'; }。
- 首先使用.sort()
- 使用.pop()
所以return语句是：
```
nbsF.length ? Math.max(...nbsF) : 'input at least one number'
```

Answer 2

这有两种方式，一种是蛮力方式，一种是另一种方式。

index2entity

那将是蛮力的方式，这是我想到的第一种方式。

而不是这样，你也可以做同样的事情，如果它是null，你可以将b和c设置为一个非常小的数字

function max(){
  var a=parseInt(document.getElementById("num1").value);
  var b=parseInt(document.getElementById("num2").value);
  var c=parseInt(document.getElementById("num3").value);
  var max = 0;

  if (isNaN(a) && isNaN(b) && isNaN(c)) {
    alert("Input at least one number");
  }
  else if (isNaN(a) && isNaN(b)) {
    alert(c);
  }
  else if (isNaN(a) && isNaN(c)) {
    alert(b);
  }
  else if (isNaN(b) && isNaN(c)) {
    alert(a);
  }
  else if (isNaN(a)) {
    alert(Math.max(b, c));
  }
  else if (isNaN(b)) {
    alert(Math.max(a, c));
  }
  else if (isNaN(c)) {
    alert(Math.max(a, b));
  }
  else {
    alert(Math.max(a, b, c));
  }

}

Answer 3

在值分配后使用eject时，我获得了最佳效果。这可确保|| 0，a和b获得值。然后，您可以在找到c时取出所有或Math.max。这是一个代码片段：

end

function max(){
    var a = parseInt(document.getElementById("num1").value) || 0;
    var b = parseInt(document.getElementById("num2").value) || 0;
    var c = parseInt(document.getElementById("num3").value) || 0;

    var end = Math.max(a, b, c);

    if (a === 0 && b === 0 && c === 0) {
    alert("Input at least one number");
  } else {
    alert(end);
  }
}

var submit = document.getElementById("submit");

submit.addEventListener('click', () => max());

如果您认为用户应该能够插入负数，只需将<div><input type="text" id="num1"></div> <div><input type="text" id="num2"></div> <div><input type="text" id="num3"></div> <button id="submit">Submit</button>更改为0（或您认为合适的任何负数）。希望这会有所帮助。

此外，如果您希望采用更加动态的方式执行此操作，则可以通过-100000获取所有输入并使用querySelectorAll将值分开并推送它们来非常有效地执行此操作到一个新的阵列。然后你可以从中返回最大值。这是一个例子：

Array.prototype.reduce()

function max() {
  const nums = [...document.querySelectorAll('.num')].reduce((i, v) => {
    if (!isNaN(parseInt(v.value))) i.push(v.value);
    return i;
  }, []);
  return nums.length ? Math.max(...nums) : 'input at least one number';
}


document.querySelector('#submit').addEventListener('click', () => alert(max()));

Math.max用于此功能

3 个答案: