39941

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!

Answer1:

You have to pass your function - omit the ()

.addEventListener("click", illu_area);

Having the () executes the function immediately.

Recommend

  • Converting nested select into join
  • MySQL INSERT working properly as documented [closed]
  • How I change a value of hidden file according which radio selected
  • How to store JSON multiple array data database in Laravel?
  • Laravel 4.2 union
  • Pragma Pack used C library causing the jvm to crash
  • Issues with wmode=“opaque” and issues with wmmode=“window”
  • display a overlay when input is clicked in react
  • avoid automatic jump to bottom on page with iframe video
  • Can a variable be stored within an image or div tag?
  • button in popup.html not working
  • $_POST for text in DIV elements
  • Making Google Visualization - Annotation Chart to work in GWT
  • Update Google Maps traffic layer without page reloading
  • Remove changes from one element when event occurs on another element?
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Meteor: Do Something On Email Verification Confirmation
  • How to clear text inside text field when radio button is select
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • Data Validation Drop Down Box Arrow Disappearing
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • How do you join a server to an Active Directory (domain)?
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?