CODEWITHSUNDEEP
javascript
Hany Essam
Hany Essam

Reputation: 31

Where to add an event handler in javascript?

I have a javascript code that creates a random 5 images, assigns it to a div node and later clones that node and populates another div node.

var numberOffaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];


function generateFaces() {
    for (var i = 0; i < numberOffaces; i++) {
        var imgNode = document.createElement("IMG");
        imgNode.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
        imgNode.style.top = Math.floor(Math.random() * 400) + "px";
        imgNode.style.left = Math.floor(Math.random() * 400) + "px";
        theLeftSide.appendChild(imgNode);
    }
    var leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    theRightSide.appendChild(leftSideImages);
}

//add event handler 
theLeftSide.lastChild.onclick =
    function nextLevel(event) {

        event.stopPropagation();

        numberOfFaces += 5;

        generateFaces();

};

When I run this code I get onclick = null, and the code not work as expected, I'm new to javascript and don't know where to put my event handler. What I need to do is, whenever I click on the last child node of the div I trigger the onclick event.

Upvotes: 0

Views: 79

Answers (1)

Rayon
Rayon

Reputation: 36609

Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties. (e.g. node.onclick = fn) [Ref]

Either use onclick inline handle(attribute) or use onclick every time element is appended.

var numberOffaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];


function generateFaces() {
  for (var i = 0; i < numberOffaces; i++) {
    var imgNode = document.createElement("IMG");
    imgNode.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    imgNode.style.top = Math.floor(Math.random() * 400) + "px";
    imgNode.style.left = Math.floor(Math.random() * 400) + "px";
    theLeftSide.appendChild(imgNode);
  }
  var leftSideImages = theLeftSide.cloneNode(true);
  leftSideImages.removeChild(leftSideImages.lastChild);
  theRightSide.appendChild(leftSideImages);
  doAddEvent();
}

//add event handler 
function doAddEvent() {
  theLeftSide.lastChild.onclick =
    function nextLevel(event) {
      event.stopPropagation();
      numberOfFaces += 5;
      generateFaces();
    };
}
doAddEvent();

As suggested by adeneo, Event Delegation will be helpful! Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.

Upvotes: 1

Related Questions