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为空，因此其值为i 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>

编辑，通过在函数开始时将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 ，如果元素的值与其pattern属性不匹配，则设置为true。
- rangeOverflow ，如果元素的值大于其max属性，则设置为true。
- rangeUnderflow ，如果元素的值小于其min属性，则设置为true。
- stepMismatch ，如果元素的值对于其step属性无效，则设置为true。
- tooLong ，如果元素的值超过其maxLength属性，则设置为true。
- typeMismatch ，如果元素的值对于其type属性无效，则设置为true。
- valueMissing ，如果元素（具有必需属性）没有值，则设置为true。
- 有效，如果元素的值有效，则设置为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);

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

4 个答案:

版本1

版本2