Javascript Uncaught TypeError：不是函数

时间：2015-11-29 20:31:49

标签： javascript uncaught-typeerror

我有一个编写脚本的任务，该脚本需要用户出生月，日和年。然后计算该人的年数，月数，天数，小时数和分钟数。此外，它还要计算到下一个生日的人数。我编写了一个名为leapYear（）的函数，它执行一些方程式来检查年份是否是闰年并且它工作正常，但如果我尝试在另一个函数内多次调用该函数，我会得到'Uncaught TypeError： leapYear不是一个函数'。有人可以告诉我哪里出错了吗？

提前致谢！

的index.html 

    <!DOCTYPE html>
<html>
<head>
    <title>HTML 5 Template</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- USE ONLY IF using author's modernizr JavaScript file -->
    <script type="text/javascript" src="modernizr.js"></script>
    <!-- USE ONLY IF using external JavaScript file -->
    <script type="text/javascript" src="functions.js"></script>
    <script type="text/javascript">
        <!--  USE ONLY IF using document level JavaScript -->
    </script>
</head>
<body>

    <div id="form">
        <h1>Age Calculator</h1>
        <h2>Enter Your Birthdate:</h2>
        <form method="get" onsubmit="return false">
            <p>
                <label for="day">Day:</label><br>
                <select name="day" id="day">
                    <script> dayList(); </script>
                </select>
            </p>
            <p>
                <label for = "month">Month:</label><br>
                    <select name="month" id="month">
                        <option value="1">January</option>
                        <option value="2">February</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">September</option>
                        <option value="10">October</option>
                        <option value="11">November</option>
                        <option value="12">December</option>
                    </select>
                </p>
                <p>
                    <label for="year">Year:</label><br>
                    <select name="year" id="year">
                        <script> yearList();</script>
                    </select>
                </p>
                <p class="left">
                    <input type="submit" value="Calculate" onclick="ageCalc()">
                    <input type="reset" value="Reset">
                </p>
        </form>
    </div>

    <div id="results">
        <p>
            You've been living for: <br>
            <p id="yearsLived"></p> Years, <br>
            <p id="monthsLived"></p> Months, <br>
            <p id="daysLived"></p> Days, <br>
            <p id="hoursLived"></p> Hours, and <br>
            <p id="minLived"></p> Minutes. <br>
            <p id="daysTillBD"></p> Days till your birthday.
        </p>
    </div>
</body>
</html>

functions.js 

    //Global Variables
var date = new Date();
var currentMin = date.getMinutes();
var currentHour = date.getHours();
var currentDay = date.getDate();
var currentMonth = date.getMonth() + 1;
var currentYear = date.getFullYear();
var month = {
  1: 31,
  2: 28,
  3: 31,
  4: 30,
  5: 31,
  6: 30,
  7: 31,
  8: 31,
  9: 30,
  10: 31,
  11: 30,
  12: 31
};



//Fill Day Form Data
function dayList() {
  var counter = 1;
  while (counter <= 31) {
    document.write("<option value='" + counter + "'>" + counter + "</option>");
    var counter = counter + 1;
  }
};



//Fill Year Form Data
function yearList() {
  var counter = date.getFullYear();

  while (counter >= 1950) {
    document.write("<option value='" + counter + "'>" + counter + "</option>");
    var counter = counter - 1;
  }
};



//Check if birth year is leap year
function leapYear(birthYear) {
  var num = (birthYear / 4) % 1;
  var num2 = (birthYear / 100) % 1;
  var num3 = (birthYear / 400) % 1;

  if (num == 0 || (num2 == 0 && num3 == 0)) {
    daysInYear = 366;
    month[2] = 29;
    leapYear = true;
  }
  else {
    daysInYear = 365;
    month[2] = 28;
    leapYear = false;
  }
};



//Age Calculator
function ageCalc() {
  var birthDay = parseInt(document.getElementById('day').value);
  var birthMonth = parseInt(document.getElementById('month').value);
  var birthYear = parseInt(document.getElementById('year').value);
  var yearsLived = currentYear - birthYear;
  var monthsLived = 0;
  var daysLived = 0;
  var hoursLived = currentHour;
  var minLived = currentMin;
  var daysTillBD = 0;
  var count = 0;

  //Days Untill birthday
  leapYear(currentYear);
  if (birthMonth < currentMonth) {
    daysTillBD = month[currentMonth] - currentDay;
    var testMonth = currentMonth;
    while (testMonth != 12) {
      testMonth++;
      daysTillBD = daysTillBD + month[testMonth];
    }
    var testYear = currentYear + 1;
    leapYear(testYear);
    testMonth = 1;
    while (testMonth != birthMonth) {
      daysTillBD = daysTillBD + month[testMonth];
      testMonth++;
    }
    daysTillBD = daysTillBD + (birthDay - 1);
  }
  else if (birthMonth > currentMonth) {
    daysTillBD = month[currentMonth] - currentDay;
    var testMonth = currentMonth + 1;
    while (testMonth != birthMonth) {
      daysTillBD = daysTillBD + month[testMonth];
      testMonth++;
    }
    daysTillBD = daysTillBD + (birthDay - 1);
  }
  else {
    if (birthDay < currentDay) {
      daysTillBD = month[currentMonth] - currentDay;
      var testMonth = currentMonth + 1;
      while (testMonth != birthMonth && testMonth <= 12) {
        daysTillBD = daysTillBD + month[testMonth];
        testMonth++;
      }
      var testMonth = 1;
      while (testMonth != birthMonth) {
        daysTillBD = daysTillBD + month[testMonth];
        testMonth++;
      }
      daysTillBD = daysTillBD + (birthDay - 1);
    }
    else if (birthDay > currentDay) {
      daysTillBD = birthDay - currentDay;
    }
  }




  //Results Display
  document.getElementById('yearsLived').innerHTML = yearsLived;
  document.getElementById('monthsLived').innerHTML = monthsLived;
  document.getElementById('daysLived').innerHTML = daysLived;
  document.getElementById('hoursLived').innerHTML = hoursLived;
  document.getElementById('minLived').innerHTML = minLived;
  document.getElementById('daysTillBD').innerHTML = daysTillBD;

};

的style.css 

h1 {
  font-size: 80px;
  color: blue;
  text-align: center;
}

h2 {
  font-size 50px;
  text-indent: 150px;
}

form {
  margin: auto;
  width: 80%;
}

#form {
  width: 50%;
  height: 600px;
  margin: auto;
  border: 5px black double;
}

#form.p {
  width: 33%;
  text-align: center;
  float: left;
  margin: 0, auto;
}

#form.p.left {
  float: right;
}

#results {

}

#results.p {

}

2 个答案:

答案 0 :(得分：1)

你做错了几件事。

首先，请记住，如果您执行以下任务，请使用JavaScript：

leapYear = true;

您写入名为leapYear的全局变量，而不是绑定到当前函数范围的变量。要写入局部变量，您应该编写

var leapYear = true;

在同一个函数中的这一行之后，leapYear中的所有赋值和引用都将写入局部变量，而不是全局变量。

其次，请记住，javascript中的函数可以与整数或字符串类似地存储到变量中。因此，当您编写function leapYear时，您声明了一个存储函数的变量leapYear。当你写leapYear = true时，你覆盖了那个变量而不是它存储了一个布尔值。如果你然后尝试调用leapYear()，你将得到错误，因为现在leapYear存储一个布尔值，而不是一个函数，并且布尔值不可调用。

为了解决您的问题，您可以将leapYear = false添加到var前面。但是，在您的特定情况下，您可以完全删除leapYear = false和leapYear = true行，因为您之后不会使用这些值。最后一点：如果您的意图是返回该值，您应该编写return false;而不是leapYear = false;（这是在Delphi中返回值的正确方法，例子）。

答案 1 :(得分：0)

您的问题为什么您的代码包含具有相同名称的变量函数（leapYear）。更改变量ou函数的名称，并在运行新测试后。

看一下这个例子：

＆＃13;
＆＃13; 
h1 {
  font-size: 15px;
  color: blue;
  text-align: center;
}
h2 {
  font-size 10px;
  text-indent: 150px;
}
form {
  margin: auto;
  width: 80%;
}
#form {
  width: 50%;
  height: 250px;
  margin: auto;
  border: 5px black double;
}
#form.p {
  width: 33%;
  text-align: center;
  float: left;
  margin: 0, auto;
}
#form.p.left {
  float: right;
}

#results {}
＆＃13; 
<script>
    //Global Variables
    var date = new Date();
    var currentMin = date.getMinutes();
    var currentHour = date.getHours();
    var currentDay = date.getDate();
    var currentMonth = date.getMonth() + 1;
    var currentYear = date.getFullYear();
    var month = {
        1: 31,
        2: 28,
        3: 31,
        4: 30,
        5: 31,
        6: 30,
        7: 31,
        8: 31,
        9: 30,
        10: 31,
        11: 30,
        12: 31
    };

    //Fill Day Form Data
    function dayList() {
        var counter = 1;
        while (counter <= 31) {
            document.write("<option value='" + counter + "'>" + counter + "</option>");
            var counter = counter + 1;
        }
    };

    //Fill Year Form Data
    function yearList() {
        var counter = date.getFullYear();
        
        while (counter >= 1950) {
            document.write("<option value='" + counter + "'>" + counter + "</option>");
            var counter = counter - 1;
        }
    };

    //Check if birth year is leap year
    function leapYearCalc(birthYear) {
        var num = (birthYear / 4) % 1;
        var num2 = (birthYear / 100) % 1;
        var num3 = (birthYear / 400) % 1;
        
        if (num == 0 || (num2 == 0 && num3 == 0)) {
            daysInYear = 366;
            month[2] = 29;
            leapYear = true;
        } else {
            daysInYear = 365;
            month[2] = 28;
            leapYear = false;
        }
    };

    //Age Calculator
    function ageCalc() {
        var birthDay = parseInt(document.getElementById('day').value);
        var birthMonth = parseInt(document.getElementById('month').value);
        var birthYear = parseInt(document.getElementById('year').value);
        var yearsLived = currentYear - birthYear;
        var monthsLived = 0;
        var daysLived = 0;
        var hoursLived = currentHour;
        var minLived = currentMin;
        var daysTillBD = 0;
        var count = 0;
        
        //Days Untill birthday
        leapYearCalc(currentYear);
        if (birthMonth < currentMonth) {
            daysTillBD = month[currentMonth] - currentDay;
            var testMonth = currentMonth;
            while (testMonth != 12) {
                testMonth++;
                daysTillBD = daysTillBD + month[testMonth];
            }
            var testYear = currentYear + 1;
            leapYearCalc(testYear);
            testMonth = 1;
            while (testMonth != birthMonth) {
                daysTillBD = daysTillBD + month[testMonth];
                testMonth++;
            }
            daysTillBD = daysTillBD + (birthDay - 1);
        } else if (birthMonth > currentMonth) {
            daysTillBD = month[currentMonth] - currentDay;
            var testMonth = currentMonth + 1;
            while (testMonth != birthMonth) {
                daysTillBD = daysTillBD + month[testMonth];
                testMonth++;
            }
            daysTillBD = daysTillBD + (birthDay - 1);
        } else {
            if (birthDay < currentDay) {
                daysTillBD = month[currentMonth] - currentDay;
                var testMonth = currentMonth + 1;
                while (testMonth != birthMonth && testMonth <= 12) {
                    daysTillBD = daysTillBD + month[testMonth];
                    testMonth++;
                }
                var testMonth = 1;
                while (testMonth != birthMonth) {
                    daysTillBD = daysTillBD + month[testMonth];
                    testMonth++;
                }
                daysTillBD = daysTillBD + (birthDay - 1);
            } else if (birthDay > currentDay) {
                daysTillBD = birthDay - currentDay;
            }
        }
        
        //Results Display
        document.getElementById('yearsLived').innerHTML = yearsLived;
        document.getElementById('monthsLived').innerHTML = monthsLived;
        document.getElementById('daysLived').innerHTML = daysLived;
        document.getElementById('hoursLived').innerHTML = hoursLived;
        document.getElementById('minLived').innerHTML = minLived;
        document.getElementById('daysTillBD').innerHTML = daysTillBD;
    }; 
</script>
<div id="form">
    <h1>Age Calculator</h1>
    
    <form method="get" onsubmit="return false">
        <p>
            <label for="day">Day:</label>
            <br>
            <select name="day" id="day">
                <script>
                dayList();
                </script>
            </select>
        </p>
        <p>
            <label for="month">Month:</label>
            <br>
            <select name="month" id="month">
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
        </p>
        <p>
            <label for="year">Year:</label>
            <br>
            <select name="year" id="year">
                <script>
                yearList();
                </script>
            </select>
        </p>
        <p class="left">
            <input type="button" value="Calculate" onclick="ageCalc()">
            <input type="reset" value="Reset">
        </p>
    </form>
</div>

<div id="results">
    <p>
        You've been living for:
        <br>
        <p id="yearsLived"></p>Years,
        <br>
        <p id="monthsLived"></p>Months,
        <br>
        <p id="daysLived"></p>Days,
        <br>
        <p id="hoursLived"></p>Hours, and
        <br>
        <p id="minLived"></p>Minutes.
        <br>
        <p id="daysTillBD"></p>Days till your birthday.
    </p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题