Question

JS的新手，试图完成一项任务，要求用户输入他们的年龄并使用Javascript：

检查输入是否为有效整数;
如果输入的年龄是目前为止输入的最低年龄，或者到目前为止输入的最高年龄，请提示消息说明（即“这是我们见过的最低年龄！”/“这是我们的最高年龄”见过。“）。

我已经能够获得＃1，但我无法弄清楚从哪里开始＃2。我已经将数字从输入记录到控制台，因为我将从那里进行图像比较。我已经开始尝试绘制alertAge（）函数，但不知道从哪里去。

最好的方法是什么？

document.getElementById("myButton").addEventListener("click", checkAge);
			
						
function checkAge() {
    var ages = document.getElementById("age").value;

    if (isNaN(ages)) {
        alert("Value must be a number. Try again!");
    }
    else {
        console.log(ages);
    }		

}

function alertAge() {
    var highest;
    var lowest;

    if (highest === undefined) {   // This is the first age we're seeing
        highest = age;
        lowest = age;
    } else {
        if (age > highest)
            highest = age;   // This is the new highest age
        if (age < lowest)
            lowest = age;    // This is the new lowest age
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <label for="age">Enter your age:</label>
  <input id="age" />
  <button id="myButton" type="submit">Go</button>
</body>
</html>

JS Bin：

http://jsbin.com/lasirep/edit?html,js,output

Answer 1

对于＃1，您可以使用<input type="number">而不是检查JS是否为数字。

对于＃2，您需要将值存储在函数之外。 Read more about Javascript context。要使用函数的外部，请执行以下操作：

    var highest,lowest;
    function alertAge() {...};

更精确的解释：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <label for="age">Enter your age:</label>
  <input type="number" id="age" />
  <button onClick="checkAge()">Go</button>
  <script>
    var highest = null;
    var lowest = null;

    function alertAge(age) {
      if (!highest) {
          highest = lowest = age;
      } else {
          if (age > highest) {
            highest = age;   // This is the new highest age
            alert('new highest', age);
          }
          if (age < lowest) {
            lowest = age;    // This is the new lowest age
            alert("new lowest", age);
          }
      }
    }

    function checkAge() {
        var ages = document.getElementById("age").value;
        if (ages) alertAge(ages);
    }
  </script>
</body>
</html>

<input type="number">仅限于数字。
onClick="checkAge()"只要点击该元素就调用checkAge（）（不必是按钮）。
highest = lowest = age;将最低设置为'年龄'并将最高设置为最低（即'年龄'）。写得少，你需要你的能量:)
alert('my text')是典型的javascript弹出式“提醒”。
if (ages)条件是为了确保我们不会向alertAge（）发送奇怪的东西;
声明函数外部的highest和lowest变量使它们成为“有点”的永久性，它允许您在函数完成时使用它们。如果在函数中声明变量，则在执行函数后该变量将不再存在。

Answer 2

由于你想在函数中保存你的最高或最低年龄，你需要把它放在一个闭包中。

试试这个。

var alertAge = function() {
            var highest;
            var lowest;
            return function(age){
                if (highest === undefined) {   // This is the first age we're seeing
                    highest = age;
                    lowest = age;
                } else {
                    if (age > highest)
                        highest = age;   // This is the new highest age
                        // alert here
                    if (age < lowest)
                        lowest = age;    
                        // alert here
                }
            };
        }();

然后你可以

Answer 3

<script>
    var highest = null;
                var lowest = null;

                function checkAge() {
                    var ages = document.getElementById("age").value;

                    if (isNaN(ages)) {
                        alert("Value must be a number. Try again!");
                    }
                    else {
                        alertAge(ages);
                        alert("highest="+highest+"\nlowest="+lowest);
                        console.log(ages);
                    }       

                }

                function alertAge(age) {

                    if (highest === null) {   // This is the first age we're seeing
                        highest = age;
                        lowest = age;
                    } else {
                        if (age > highest)
                            highest = age;   // This is the new highest age
                        if (age < lowest)
                            lowest = age;    // This is the new lowest age
                    }
                }
</script>

    <button id="myButton" onclick="checkAge();">Go</button>

我希望这能解决你的问题。

使用Javascript从用户输入

3 个答案: