Мне нужно показать окно предупреждения, когда пользователь не вводит номер - PullRequest
Новая
       11

Мне нужно показать окно предупреждения, когда пользователь не вводит номер

1 голос
/ 10 октября 2019

Я не знаю, что я делаю неправильно в отношении функции 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>

Ответы [ 4 ]

1 голос
/ 10 октября 2019

Версия 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;
}
0 голосов
/ 10 октября 2019

Как на счет этого ... 

            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

                }

            }

Надежный, многократно используемый и гибкий - просто сдвиньте идентификаторы полей ввода в функции. Это также покажет максимум из 3 чисел, которые отсутствовали, я думаю. пример вызова: 

       var s = "fnumber snumber tnumber";
       MaxN(s);
0 голосов
/ 10 октября 2019

Вы имеете в виду это ?? 

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>
0 голосов
/ 10 октября 2019

Это будет работать, если вы измените свою логику, ваши входные значения будут , а не числами , когда внутри ничего не написано, поэтому вы должны использовать 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" />
  • использовать API проверки JavaScript (методы checkValidity(), setCustomValidity())
  • внимательно прочитайте различные типы результатов, которые могут появиться во время проверки
    • customError Установите в значение true, если установлено пользовательское сообщение о действительности.
    • patternMismatch Устанавливается в true, если значение элемента не соответствует его атрибуту pattern.
    • rangeOverflow Устанавливается в true, если значение элемента больше, чем его атрибут max.
    • rangeUnderflow Устанавливается в значение true, если значение элемента меньше его атрибута min.
    • stepMismatch Устанавливается в значение true, если значение элемента недопустимо для его атрибута шага.
    • tooLong Устанавливается в значение true, если значение элемента превышаетего атрибут maxLength.
    • typeMismatch Устанавливается в true, если значение элемента недопустимо для его атрибута типа.
    • valueMissing Устанавливается в true, если элемент (с обязательным атрибутом) не имеет значения.
    • valid Устанавливается в true, если значение элемента является действительным.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...