Javascript onclick event to area

Question

I am trying to add onclick event through javascript to my map element that was created through javascript too , I am not going to paste whole code here but will make a short version . so this what I have done so far:

 var mapimg = createElement("img"); // create and set up img element for map 
mapimg.src "some path ";
map.img.width = some with;
map.img.height = some height;
map.usemap = "#Map"; // img element done
var map = createElement("map"); // set map element and attributes for him 
map.name = "Map";
map.id = "Map";
area(1-10) = createElement("area"); // creating a 10 areas 
area.id = some;
area.shape = some;
area.coords = some; // area allement have same attributes but with different values 
// ones i done with are append them to map and then append mapimg and map to body 

//  now trying to add on click event 

map.addEventListener("onClick",function(){
            var id = map.getElementById(this);
            var img = "images/map/reg" + id + ".jpg";
            mapimg.src = img;
        });

map are working but onclick event are not working i have writed jquery version that works just fine with a html elements

$(document).ready(function() {
            $('area').click(function() {
                var title = $(this).attr('title');
                var image = "images/map/reg" + title + ".jpg";
                $('.mapimg').attr('src', image);
                $('#loginsubmitbutton2').show();
                $('input[name="village"]').attr('value', title);
            })

        });

this is a full script

Answer 1

It should not be onclick it should be just click when using addEventListener

    map.addEventListener("click",function(){
        var id = map.getElementById(this);
        var img = "images/map/reg" + id + ".jpg";
        mapimg.src = img;
    });

OR if you want to use onclick

    map.onclick = function(){
        var id = map.getElementById(this);
        var img = "images/map/reg" + id + ".jpg";
        mapimg.src = img;
    };

How to add event listener to repeating elements inside a parent without looping through all of them

If you want to add event to multiple repeated elements inside a parent element, rather than looping through all the elements and wasting memory a good solution is to use the concept of event propagation as explained in the code below: (since I understand map is the parent of area)

map.addEventListener("click", myFunction());
//we attach an event listener to the parent

function myFunction(e){
    //e.currentTarget : to which event listener is attached
    //e.target: the element which was clicked
    if(e.target !== e.currentTarget){
       //we only need to hear events from the area (children of map), so we ignore any other events that are called when the parent is clicked by this if statement
        var id = e.target.Id;

        alert(id);
        //your code here

    }
    e.stopPropagation(); //we stop the propagation of event to the DOM once its purpose is solved 

}

This solution is independent of the number of area elements you have. You will avoid using any for loop and wasting memory.