Selecting and Adding Functions to Div's via For Loop

Question

I wanted to select divs quickly so i wrote a for loop that select all divs and add functions to them quickly instead of "onClick='blahblah'" method. Here is my code:

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

My problem is: When i open this html file or refresh the page, alert messages appears (six times) immediately. I want it to alert when i click a grid...

Note:

it works when i do this:

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

}
}

But this isnt going to be useful in future i think :P

Help me!

tymeJV · Accepted Answer · 2014-10-03 19:04:17Z

2

You have to pass your function - omit the ()

.addEventListener("click", illu_area);

Having the () executes the function immediately.

answered Oct 3, 2014 at 19:04

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CreativeNameItIs Over a year ago

hmm i have a similar question. What to do if i want to add parameter like this? document.getElementById("t"+test_id).addEventListener("click", illu_area(test_id));

tymeJV Over a year ago

Use an anonymous function and call your function from within that "click", function() { illu_area(test_id) }

Collectives™ on Stack Overflow

Selecting and Adding Functions to Div's via For Loop

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related