2012-07-15 494 views
1

我想製作一個簡單的javascript倒計時程序。出於某種原因,倒計時觸發不需要我點擊啓動鏈接。Javascript中的addEventListener自動觸發點擊事件

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title id = "titleElement">My Top Ten Movies</title> 

    </head> 

    <body> 

     <p>Countdown Suren's favorite ten movies 
      <a href="" id = "start"> Start </a> 
     </p> 

     <table> 

      <thead> 
       <tr> 
        <td>Number</td> 
        <td>Movie</td> 
       </tr> 
      </thead> 

      <tbody id = "movieList"> 

      </tbody> 

     </table> 

    <script src="js/practice.js"></script> 
    </body> 
</html> 

和我的JavaScript文件...

//get the start element 
var start = document.getElementById("start"); 

//register listener 
start.addEventListener('click', startCountDown(), false); 


function startCountDown() 
{ 
    //alert("Here!"); 
    //creat the list of 10 movies 
    var myTenMovies = ["Breaveheart", "Mars Attacks", "Startship Troopers", "Jurassic Park", "Terminator 2", 
         "Austion Powers: Gold Member", "Fifth Element", "Bram Stocker's Dracula", 
         "Shashank Redemption", "LOTR: Return Of The King"]; 

    //get the location in the DOM to add each movie 
    var tableLocation = document.getElementById("movieList"); 

    //create a timer function 
    var countdown = setInterval(insertNextMovie, 750); 

    //keep track of the index 
    var index = 0; 
    var movieRankIndex = 10; 
    //alert("1"); 


    //function to add to DOM 
    function insertNextMovie() 
    { 
     //alert("Here3!"); 
     //create a text nodes 
     var movie = document.createTextNode(myTenMovies[index]); 
     var rank = document.createTextNode(movieRankIndex); 

     //create <td> element 
     var rankData = document.createElement("td"); 
     var movieTitle = document.createElement("td"); 
     var row = document.createElement("tr"); 

     //add text to td 
     rankData.appendChild(rank); 
     movieTitle.appendChild(movie); 

     //fill the row with data 
     row.appendChild(rankData); 
     row.appendChild(movieTitle); 

     if(movieRankIndex == 1) 
     { 
      row.setAttribute("bgcolor", "yellow"); 
      //row.setAttribute("align", "right"); 
     } 
     //add td to DOM table 
     tableLocation.appendChild(row); 

     //append index 
     index++; 
     movieRankIndex--; 

     if(index == 10) 
     { 
      clearInterval(countdown); 
     } 

    } 

    //alert("2"); 
} 

回答

7

這是因爲startCountDown()調用函數startCountDown。刪除括號,它會起作用。

+0

我刪除了括號,它不會自動運行了,但現在我沒有做任何事情後,我點擊開始。 – Suren 2012-07-15 06:33:47

+0

這可能是錨點中斷執行。刪除'href'屬性或將其更改爲'#' – Zirak 2012-07-15 06:43:25

+0

美麗! 1爲你高級Zirak! – Suren 2012-07-15 06:47:49