javascript - Javascript中的addEventListener自动触发点击事件

标签 javascript dom-events

我想制作一个简单的 JavaScript 倒计时程序。出于某种原因,我无需单击开始链接即可触发倒计时。

<!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");
}

最佳答案

那是因为 startCountDown() 调用了函数 startCountDown。删除括号,它将起作用。

关于javascript - Javascript中的addEventListener自动触发点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11489734/

相关文章:

javascript - 在字符串的同一部分排除正则表达式

javascript - 音频的 onloadedmetadata 回调?

firefox-addon - 检测 XUL 中的选项卡框选项卡更改

javascript - 从浏览器的网络控制台获取信息

javascript - 制作粘性导航

javascript - 如何从一个模板创建多个不同语言的页面?

javascript - 在 ElectronJS 应用程序中强制在外部浏览器中打开链接

Javascript ES6 - 类内部的枚举像静态枚举一样在外部使用

javascript - YAHOO Event.stopEvent 事件

javascript - 我们如何跟踪使用嵌入式 JavaScript 标记转换的广告的点击次数?