当用户不输入任何数字时，我需要显示一个警告框

Question

我不知道关于 MaxN 函数我做错了什么。最大数量正确显示。但是，当我必须显示一条警报消息以防用户未输入任何数字时，它会在警报 "NaN" 中显示而不是所需的消息。这是我的代码：

JS 文件：

function getFirstNumber()
{
    var value1 = document.getElementById("fnumber").value;
    var fn = parseInt(value1);

    return fn;
}

function getSecondNumber()
{
    var value2 = document.getElementById("snumber").value;
    var sn = parseInt(value2);

    return sn;
}

function getThirdNumber()
{
    var value3 = document.getElementById("tnumber").value;
    var tn = parseInt(value3);

    return tn;
}

function MaxN()
{
    var fn = getFirstNumber();
    var sn = getSecondNumber();
    var tn = getThirdNumber();


    if (fn == "" && sn == "" && tn =="") {
        alert('Please input at least one number');
    } else if (fn >= sn && fn >= tn){
        alert(fn);
    } else if (sn >= fn && sn >= tn){
        alert(sn);
    } else {
        alert(tn);
    }
}

HTML 文件：

<html>
<head>
    <script type="text/javascript" src="javafile_exercise.js"></script>
</head>
<body>
    <div>
    <span>First number: </span><input type="text" id="fnumber" />
    </div>

    <div>
    <span>Second number: </span><input type="text" id="snumber" />
    </div>

    <div>
    <span>Third number: </span><input type="text" id="tnumber" />
    </div>

    <br>
    <button type="button" onclick="MaxN()">Max Number</button>
    </br>

</body>
</html>

Answer 1

版本 1

只有在

时才会显示消息

fn == "" and sn == "" and tn ==""

这意味着三个文本字段都必须为空。使用 OR 语句，应该可以解决您的问题。

如果其中一个文本字段为空，您的消息应该会出现。

此时您正在调用该函数，即使 on 为空且其值为 NaN。

编辑修正：

if ((fn == "") || (sn == "") || (tn =="")) 
{
  alert('One of the text field is empty');
}

版本 2

另一种方法是在文本字段为空时返回 0。通过这种方式，即使文本字段为空，您也将始终拥有一个数字。

var value1 = document.getElementById("fnumber").value;

if (value1 == null)
{
  return 0;
}
else
{
  var fn = parseInt(value1);

  return fn;
}

Answer 2

如果你改变你的逻辑它会起作用，你的输入值是而不是数字当里面什么都不写的时候，所以你应该使用isNaN.

function getFirstNumber()
{
    var value1 = document.getElementById("fnumber").value;
    var fn = parseInt(value1);

    return fn;
}

function getSecondNumber()
{
    var value2 = document.getElementById("snumber").value;
    var sn = parseInt(value2);

    return sn;
}

function getThirdNumber()
{
    var value3 = document.getElementById("tnumber").value;
    var tn = parseInt(value3);

    return tn;
}

function MaxN()
{
    var fn = getFirstNumber();
    var sn = getSecondNumber();
    var tn = getThirdNumber();


    if (isNaN(fn) && isNaN(sn) && isNaN(tn)) {
        alert('Please input at least one number');
    } else if (fn >= sn && fn >= tn){
        alert(fn);
    } else if (sn >= fn && sn >= tn){
        alert(sn);
    } else {
        alert(tn);
    }
}

<div>
    <span>First number: </span><input type="text" id="fnumber" />
    </div>

    <div>
    <span>Second number: </span><input type="text" id="snumber" />
    </div>

    <div>
    <span>Third number: </span><input type="text" id="tnumber" />
    </div>

    <br>
    <button type="button" onclick="MaxN()">Max Number</button>
    </br>

EDIT 通过在函数开始时将 NaN 变为 0 使用不同类型的逻辑

function getFirstNumber()
{
    var value1 = document.getElementById("fnumber").value;
    var fn = parseInt(value1);

    return fn;
}

function getSecondNumber()
{
    var value2 = document.getElementById("snumber").value;
    var sn = parseInt(value2);

    return sn;
}

function getThirdNumber()
{
    var value3 = document.getElementById("tnumber").value;
    var tn = parseInt(value3);

    return tn;
}

function MaxN()
{
    var fn = isNaN(getFirstNumber()) ? 0 : getFirstNumber() ;
    var sn = isNaN(getSecondNumber()) ? 0 : getSecondNumber() ;
    var tn = isNaN(getThirdNumber()) ? 0 : getThirdNumber() ;


    if (fn == 0 && sn == 0 && tn == 0) {
        alert('Please input at least one number');
    } else if (fn >= sn && fn >= tn){
        alert(fn);
    } else if (sn >= fn && sn >= tn){
        alert(sn);
    } else {
        alert(tn);
    }
}

<div>
    <span>First number: </span><input type="text" id="fnumber" />
    </div>

    <div>
    <span>Second number: </span><input type="text" id="snumber" />
    </div>

    <div>
    <span>Third number: </span><input type="text" id="tnumber" />
    </div>

    <br>
    <button type="button" onclick="MaxN()">Max Number</button>
    </br>

最后但并非最不重要的一点。你应该做的是。

使用 HTML 输入类型 number 例如<input type="number" min="0" max="1000" step="1" />
使用JavaScript Validation API（方法checkValidity()、setCustomValidity()）
请仔细阅读验证期间可能出现的不同类型的结果
- customError 如果设置了自定义有效性消息，则设置为 true。
- patternMismatch 如果元素的值与其模式属性不匹配，则设置为 true。
- rangeOverflow 如果元素的值大于其 max 属性，则设置为 true。
- rangeUnderflow 如果元素的值小于其 min 属性，则设置为 true。
- stepMismatch 如果元素的值根据其 step 属性无效，则设置为 true。
- tooLong 如果元素的值超过其 maxLength 属性，则设置为 true。
- typeMismatch 如果元素的值根据其类型属性无效，则设置为 true。
- valueMissing 如果元素（具有必需属性）没有值，则设置为 true。
- valid 如果元素的值有效，则设置为 true。

Answer 3

你是说这个？？

function getFirstNumber()
{
    var value1 = document.getElementById("fnumber").value;
    var fn = parseInt(value1);

    return fn;
}

function getSecondNumber()
{
    var value2 = document.getElementById("snumber").value;
    var sn = parseInt(value2);

    return sn;
}

function getThirdNumber()
{
    var value3 = document.getElementById("tnumber").value;
    var tn = parseInt(value3);

    return tn;
}

function MaxN()
{
    var fn = getFirstNumber();
    var sn = getSecondNumber();
    var tn = getThirdNumber();

  if(!isNaN(fn)&&!isNaN(sn)&&!isNaN(tn)){
    if (fn == "" && sn == "" && tn =="") {
        alert('Please input at least one number');
    } else if (fn >= sn && fn >= tn){
        alert(fn);
    } else if (sn >= fn && sn >= tn){
        alert(sn);
    } else {
        alert(tn);
    }
    }
  else 
    alert("Please Enter Numbers Only!!");
}

<html>
<head>
    <script type="text/javascript" src="javafile_exercise.js"></script>
</head>
<body>
    <div>
    <span>First number: </span><input type="text" id="fnumber" />
    </div>

    <div>
    <span>Second number: </span><input type="text" id="snumber" />
    </div>

    <div>
    <span>Third number: </span><input type="text" id="tnumber" />
    </div>

    <br>
    <button type="button" onclick="MaxN()">Max Number</button>
    </br>

</body>
</html>

Answer 4

这样的事情怎么样...

            function getNumber(id, number, ERRMessage) {
                var result = false;
                var elm = document.getElementById(id);
                try {
                    var number = parseInt(value2);
                    var result = true;
                } catch (ex) {
                    ERRMessage = ex.message;
                }
                return result;
            }


            function MaxN(s) {

                //create id array 
                var ids = s.split(" ");
                //init result array
                var numbers = []
                //get the numbers from the form 
                for (var i = 0; i < s.length; i++) {
                    if (getNumber(ids[i], number,ERR)) {
                        numbers.push(number)
                    } else { 
                        console.log(ERR);
                    }
                }
                // do we have 3 numbers at least
                if (numbers.length < 3) { // maybee not
                    alert(tn);
                    return;

                } else {// we have 3 numbers

                    alert("Yippiee"); // get exited
                    console.log(numbers)

                    // get the maximum of the numbers
                    var max = numberts[0];
                    for (var i = 0; i < s.length; i++) {
                        if (numbers[i] > max) {
                            max = numbers[i];
                        }
                    }
                    alert("MAXIMUM is" + max) // show result

                }

            }

稳健、可重用和灵活，只需铲除函数中输入字段的 id。它还将显示我猜丢失的 3 个数字中的最大值。调用示例：

       var s = "fnumber snumber tnumber";
       MaxN(s);

当用户不输入任何数字时，我需要显示一个警告框

I need to show an alert box when the user does not input any number

javascript

alert

版本 1

版本 2