简体   繁体   English

Javascript Uncaught TypeError:不是函数

[英]Javascript Uncaught TypeError: is not a function

I have an assignment to write a script that takes a users birth month, day, and year.我有一项作业要编写一个脚本,该脚本需要用户出生的月份、日期和年份。 It then calculates the number of years, months, days, hours, and minutes the person has lived.然后计算此人已活的年数、月数、天数、小时数和分钟数。 Also it is suppose to count the number of days till the persons next birthday.还假设计算到下一个生日的人的天数。 I have written a function called leapYear() that does a couple of equations to check if the year is a leap year and it works fine, but if I try to call the function more than once inside of another function I get 'Uncaught TypeError: leapYear is not a function'.我编写了一个名为leapYear() 的函数,它执行几个等式来检查年份是否是闰年并且它工作正常,但是如果我尝试在另一个函数中多次调用该函数,我会得到“未捕获的类型错误:闰年不是一个函数'。 Can someone please advise on where I am going wrong?有人可以告诉我哪里出错了吗?

Thanks in advance!提前致谢!

index.html索引.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函数.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 {

}

There are several things that you do wrong.有几件事你做错了。

First, remember that in JavaScript if you do assignment like this:首先,请记住在 JavaScript 中,如果您像这样进行赋值:

leapYear = true;

You write into a global variable called leapYear , not into a variable bound to a scope of the current function.您写入一个名为leapYear全局变量,而不是写入绑定到当前函数作用域的变量。 To write into a local variable, you should write要写入局部变量,您应该编写

var leapYear = true;

All assignments and references into leapYear after such line within the same funciton will write into a local variable, not into a global one.在同一leapYear内的此类行之后,所有对leapYear赋值和引用都将写入局部变量,而不是全局变量。

Second, remember that functions in javascript can be stored into a variable similarly to an integer or a string.其次,请记住,javascript 中的函数可以像整数或字符串一样存储到变量中。 So, when you write function leapYear , you declare a variable leapYear that stores a function.因此,当您编写function leapYear ,您声明了一个存储函数的变量leapYear When you write leapYear = true you overwrite that variable and not it stores a boolean.当您编写leapYear = true您会覆盖该变量而不是它存储布尔值。 If you then try to call leapYear() you will get the error, because now leapYear stores a boolean, not a function, and boolean is not callable.如果您随后尝试调用leapYear()您将收到错误消息,因为现在leapYear存储的是布尔值,而不是函数,并且布尔值不可调用。

So to fix your problem, you can just prepend leapYear = false with var .因此,要解决您的问题,您可以在前面加上leapYear = falsevar In your particular case, however, you can just remove leapYear = false and leapYear = true lines altogether, because you do not ever use those value afterwards.但是,在您的特定情况下,您可以完全删除leapYear = falseleapYear = true行,因为之后您再也不会使用这些值。 One last note: if your intent was to return that value, you should write return false;最后一点:如果你的意图是返回那个值,你应该写return false; instead of leapYear = false;而不是leapYear = false; (which would be a correct way to return a value in Delphi, for example). (例如,这将是在 Delphi 中返回值的正确方法)。

Your have problem why your code contains de variable e funcion with same name (leapYear).您有问题,为什么您的代码包含同名的 de 变量 e 函数(leapYear)。 Change name of variable ou function and after run new test.更改变量 ou 函数的名称并在运行新测试后。

Look this example:看这个例子:

 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 {}
 <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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM