addEventListener en Javascript activa el evento de clic automáticamente

Question

Jul 15, 2012, 07:44 AM

addEventListener en Javascript activa el evento de clic automáticamente

Quiero hacer un simple programa de cuenta regresiva javascript. Por alguna razón, la cuenta atrás se dispara sin que tenga que hacer clic en el enlace de inicio.

<!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>

y mi archivo 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");
}