首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >此函数的Math.max

此函数的Math.max
EN

Stack Overflow用户
提问于 2018-06-02 06:31:29
回答 3查看 673关注 0票数 -1

我需要创建一个HTML页面,添加三个文本框,用户将在其中输入三个数字:abc

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

案例:

  • 如果没有引入数字,则应显示一条消息,要求用户输入至少一个数字。
  • 如果只引入了三个数字中的一个,则该数字为最大数字。
  • 如果引入两个数字,则应显示两个数字中的最大值。
  • 如果引入三个数字,则应显示三个数字中的最大值。

我得到NaN警报弹出,但我需要一个警报显示"input at least one number"。这是我尝试过的:

代码语言:javascript
复制
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));
  }
}

我该怎么办?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-02 06:57:15

在赋值之后使用|| 0时,我得到了最好的结果。这可确保abc获得一个值。然后,您可以在查找end时去掉所有的或Math.max。下面是一段代码片段:

代码语言:javascript
复制
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());
代码语言:javascript
复制
  <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()将值分离出来并将它们推送到一个新的数组中,从而非常有效地实现这一点。然后你可以只返回其中的最大值。下面是一个这样的例子:

代码语言:javascript
复制
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()));
代码语言:javascript
复制
<div><input class="num" type="text"></div>
<div><input class="num" type="text"></div>
<div><input class="num" type="text"></div>

<button id="submit">Submit</button>

票数 0
EN

Stack Overflow用户

发布于 2018-06-02 06:54:28

下面是几行代码就可以实现这一点的方法:

  • 首先选择所有input元素,并将它们放入一个数组中。将它们映射到输入值的数组。无论它们是不是整数,都会通过parseInt()传递:

让nbs = ...document.querySelectorAll('.nb').map(e => nbs)过滤它们,只保留整数。小心,因为typeof NaN == "number"是真的.所以也要确保它不是NaN

让nbsF = nbs.filter(e => ( typeof e == " number“&& !isNaN(e) ))

  • 通过检查数组是否至少有一个对象(即至少有一个数字,因为它已被过滤为只包含数字)来最终返回结果。如果数组不包含任何数字,则返回一个字符串:

返回nbsF.length?Math.max(...nbsF):‘至少输入一个数字’

代码语言:javascript
复制
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'
  
}
代码语言:javascript
复制
<input class="nb" type="text">
<input class="nb" type="text">
<input class="nb" type="text">

<button onclick="console.log(max())">Get maximum</button>

感兴趣的人的

  • 我使用第一部分中的spread syntax将代码s的代码(由document.querySelectorAll()提供)转换为代码s的实际对象代码。这样,我可以使用< NodeList >c25HTMLElement>和.filter().
  • In语句这样的方法,我使用的是<HTMLElement>c29Array >语句,这是<代码>D30语句的缩写。在这种情况下:

返回nbsF.length?Math.max(...nbsF):‘至少输入一个数字’

等同于:

if(nbsF.length) { return Math.max(...nbsF) } else { return‘至少输入一个数字’;}

它使用起来非常方便。

  • 正如lucchi在评论中所说:我们可以:

,而不是返回nbsF.length ? Math.max(...nbsF) : 'input at least one number'

代码语言:javascript
复制
- first sort the array in ascending order with [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
- return the last item of the array with [`.pop()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)

因此,返回语句将是:

返回nbsF.sort().pop()

票数 2
EN

Stack Overflow用户

发布于 2018-06-02 06:43:58

这里有两种方式,一种是暴力方式,另一种是另一种方式。

代码语言:javascript
复制
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));
  }

}

这将是暴力的方式,这是我首先想到的方式。

相反,您也可以这样做,如果a b和c为空,则将其设置为一个非常小的数字。

代码语言:javascript
复制
function max(){
  var a=parseInt(document.getElementById("num1").value)||-10000;
  var b=parseInt(document.getElementById("num2").value)||-10000;
  var c=parseInt(document.getElementById("num3").value)||-10000;
  var max = 0;

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

  if (end == -10000) {
    alert("Input at least one number");
  }
  else {
    alert(end);
  }


}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50651744

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档