2012-07-15 493 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