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.
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. (eg 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.