Javascript 通过For循环选择和向Div添加函数_Javascript_Html_Css_Loops_For Loop

Javascript 通过For循环选择和向Div添加函数

javascript html css loops for-loop

Javascript 通过For循环选择和向Div添加函数,javascript,html,css,loops,for-loop,Javascript,Html,Css,Loops,For Loop,我想快速选择div，所以我编写了一个for循环，用于选择所有div并快速向其添加函数，而不是onClick='blahblah'方法。这是我的密码： <!DOCTYPE html> <html> <head> <title>Strategy Game Dev Test</title> <meta charset="utf-8" /> <script type="text/javascript"&

我想快速选择div，所以我编写了一个for循环，用于选择所有div并快速向其添加函数，而不是onClick='blahblah'方法。这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <title>Strategy Game Dev Test</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function illu_area(){
        alert("test");
        }
        function everything(){
            for(var test_id = 0; test_id < 7; test_id++){
            document.getElementById("t"+test_id).addEventListener("click", illu_area());

            }
        }
    </script>
    <style type="text/css">
        * { margin: 0px; padding: 0px; font-family: Tahoma}
        .container_main {
            margin: 10px;
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .territory_type1 {
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .territory_type2_horizontal {
            width: 200px;
            height: 100px;
            position: absolute;
        }
        .territory_type2_vertical {
            width: 100px;
            height: 200px;
            position: absolute;
        }
        #t6 {
            background-color: blue;
            left: 200px;
        }
        #t5 {
            background-color: lightblue;
            left: 100px;
        }
        #t4 {
            background-color: green;
        }
        #t3 {
            background-color: turquoise;
            top: 200px;
        }
        #t2 {
            background-color: lightgreen;
            top: 200px;
            left: 200px;
        }
        #t1 {
            background-color: brown;
            top: 100px;
            left: 200px;
        }
        #t0 {
            background-color: yellow;
            top: 100px;
            left: 100px;
        }
        .grid {
            height: 100px;
            width: 100px;
            position: absolute;
            top :0px;
        }
        #t3_g2 {
            left: 100px;
        }
        #t4_g2 {
            top: 100px;
        }
    </style>
</head>
<body onLoad="everything()">
    <div class="container_main">
        <div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0">
            Origin
        </div>
        <div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0">
            1
        </div>
        <div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1">
            2
        </div>
        <div id="t3" class="territory_type2_horizontal">
            3
            <div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div>
            <div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div>
        </div>
        <div id="t4" class="territory_type2_vertical">
            4
            <div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div>
            <div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div>
        </div>
        <div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1">
            5
        </div>
        <div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1">
            6
        </div>
    </div>
</body>
</html>

我的问题是：当我打开这个html文件或刷新页面时，警报消息会立即出现六次。我希望它在我单击网格时发出警报

注:

当我这样做时，它会起作用：

function everything(){
            for(var test_id = 0; test_id < 7; test_id++){
            document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");});

}
}

但我认为这在将来不会有用

救救我

您必须传递函数-忽略

让用户立即执行函数。

hmm我有一个类似的问题。如果我想添加这样的参数，该怎么办？document.getElementByIdt+测试id.addEventListenerclick，illu\u区域测试id；使用匿名函数，并从该单击函数{illu\u areatest\u id}中调用您的函数

.addEventListener("click", illu_area);