2015-11-29 199 views
-3

我有一個分配給寫一個腳本,需要用戶的出生月份,日和年。然後計算該人的年,月,日,小時和分鐘數。也計算直到下一個生日的人數。我寫了一個名爲leapYear()的函數,它執行幾個方程來檢查年份是否爲閏年並且工作正常,但如果我嘗試在另一個函數內多次調用該函數,則會得到'Uncaught TypeError:閏年不是一種功能'。有人可以告訴我哪裏出錯了嗎?的Javascript遺漏的類型錯誤:不是一個函數

提前致謝!

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

} 
+0

請提供更多的細節。錯誤發生在哪條線上?函數調用? –

+0

請閱讀如何創建[mcve]並相應地編輯您的問題。 –

回答

1

有幾件事情,你做的不對。

首先,請記住,在JavaScript中,如果你不喜歡這種分配:

leapYear = true; 

你寫進去叫leapYear一個全球變量,而不是到綁定到當前函數的作用域的變量。要寫入到一個局部變量,你應該在同一功能可按內的這種行之後寫

var leapYear = true; 

所有的作業和引用到leapYear將寫入到一個局部變量,而不是成爲一個全球性的。

其次,請記住,在JavaScript功能可以類似地存儲到一個變量爲整數或字符串。所以,當你寫function leapYear時,你聲明瞭一個存儲函數的變量leapYear。當你寫leapYear = true時,你覆蓋該變量,而不是它存儲一個布爾值。如果再嘗試撥打leapYear()你會得到錯誤,因爲現在leapYear存儲布爾值,而不是一個函數,布爾是不可調用的。

因此,要解決你的問題,你可以在前面加上leapYear = falsevar。但是,在您的具體情況中,您可以刪除leapYear = falseleapYear = true行,因爲您以後不會使用這些值。最後一點:如果你的目的是爲了返回這個值,你應該寫return false;,而不是leapYear = false;(這將返回在Delphi中值,例如以正確的方式)。

+0

謝謝!我沒有意識到函數名稱和變量在哪裏如此接近。我覺得很愚蠢,因爲我已經把leapYear = true/false變量放在項目的開頭,然後決定反對它,但忽略從函數本身中刪除它。 – user5491517

0

你有問題,爲什麼你的代碼中包含具有相同名稱(leapYear)去變量e funcion。更改變量ou函數的名稱並運行新的測試後。

看看這個例子:

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>

相關問題