How can I add an event listener to an element that does not show up immediately on page load?

Question

I am working with Google Maps API and I am trying to get a website running that shows you information about a specific location when it is clicked on. There are little clickable buttons at the bottom of the information div that are meant to change the information displayed based on the button that is clicked on.

http://i61.tinypic.com/vxge4o.jpg -->example

These buttons only show up after the location on the map is clicked on, so my addEventListener shows up as an error "Cannot call method 'addEventListener' of null"; I'm assuming this occurs because the method is looking for a button that isn't there yet.

Is there a way to get the addEventListener method working only after a location has been selected on the map?

Here is the Javascript code I currently have:

function change() {
  var within = document.getElementById("information").innerhtml;
  within = "<p>hi</p>";
}

function recreate(){
  var alter = document.getElementById("2");
  alter.addEventListener('click', function(event) {
    change();
  });
}

And here is the HTML snippet that corresponds with it:

 <div id="information">
    <p>Location</p>
    <div id="details">
        <p>Candidate Type:</p>
        <p>Candidate Name:</p>
        <p>Location Name:</p>
        <p>PeopleSoft Location Code:</p>
        <p>Street Address:</p>
        <p>City:</p>
        <p>County:</p>
        <p>State:</p>
        <p>Zipcode:</p>
        <p>Latitude:</p>
        <p>Longitude:</p>
        <p>From 2C Survey?</p>
    </div>
    <center>
        <input type="image" src="*image source*" id="1"/>
        <input type="image" src="*image source*" id="2"/>
        <input type="image" src="*image source*" id="3"/>
        <input type="image" src="*image source*" id="4"/>
        <input type="image" src="*image source*" id="5"/>
        <input type="image" src="*image source*" id="6"/>
        </center>
    <div id="back"><center>
        <input type="image" src="*image source*"/>
    </center></div>
</div>

I have attempted the solutions on each of these pages without avail.

https://stackoverflow.com/a/9856159/3838411

Attach a body onload event with JS

When I try to use the window.onload option, my map breaks and just shows a gray box. I tried putting it in a script tag in the html file as well, but that did not work either.

I am sure there is a way of doing this, but I am quite new to JavaScript so I am probably missing some idea here. Any help would be great!

EDIT

I know this may not be the easiest, but since I am learning JavaScript right now, I would like an answer in pure JavaScript, although I know jQuery would probably be more simple. Thanks again!

Second Edit

My original information div is already created in the HTML file. I used CSS to hide it

#information{
display: none;
}

and then used:

google.maps.event.addListener(marker, 'click', function(){
    map.setZoom(16);
    map.setCenter(marker.getPosition());
    document.getElementById("information").style.display="block";
});

to display it when the point is clicked on

"These buttons only show up after the location on the map is clicked on". Then, can't you add your event listener, _after_ the button is created? — epipav, Jul 21 '14 at 16:48
Can you show the code that is creating the information DIVs? — JRulle, Jul 21 '14 at 17:09
@epipav Is there a way to specifically state when the event listener occurs? I was not aware of that; thanks for the tip, I'll look into it! — Isheeta S, Jul 21 '14 at 18:42
@JRulle I have edited my original post with the code; I'm not sure if hiding the div to begin with in CSS is the right way to go about doing this, but that was what I went with — Isheeta S, Jul 21 '14 at 18:47
@IsheetaS is the DIV being created when the page initially loads or not until the first time it is needed? (or is it being created/added to the DOM and destroyed/removed from DOM each unique time it is called?) — JRulle, Jul 21 '14 at 19:37
@JRulle the DIV is being created when the page initially loads, it's just being hidden until it's needed. — Isheeta S, Jul 21 '14 at 20:07
and the content in the DIV is being changed/updated depending on the click that calls it? — JRulle, Jul 21 '14 at 20:14

score 0 · Answer 1 · answered Jul 21 '14 at 21:04

If you can re-purpose the elements rather than creating new ones for each use, you can try something like this (rough example to so you the idea): JSFiddle

//traverse the DOM to get to your center container
var thediv = document.getElementById("information");
var thecenter = thediv.getElementsByTagName("input");

//set up the event handler for all of the images with a loop
for (i = 0; i < thecenter.length; i++) { 
    thecenter[i].addEventListener("click", function(){ inputimageclicked(this) }, false);
}

//function to handle all image clicks
//as you can see, you can access the object that fired the 
//click event and use it to vary the effect of the function
//you can access any attribute, style, etc of the target object
function inputimageclicked(obj) { 
   alert("input image with id: " + obj.id); 
   //this is where you will determine what <input> fire the event 
   //and react as you need to (call another function, show/hide 
   //something, etc.
}

*You will need to handle old IE attachEvent alternatives if you need to support those older browsers

score 0 · Answer 2 · answered Jul 28 '14 at 20:47

I actually used @epipav 's suggestion of making the event occur after the elements were shown. It ended up looking like this.

google.maps.event.addListener(marker, 'click', function(){
    *actions that are put into place*

    var myBtn = document.getElementById("2");
    myBtn.addEventListener('click', function(event) {
      change1();
    }, false);
    function change1(){ 
      *some function*
    };
}, false);

I'm not sure if I should be editing my previous post or creating an answer, since this is the solution I used. I'm also not sure if I should delete the question or not, as it may help others in the future.

How can I add an event listener to an element that does not show up immediately on page load?

2 Answers2