Reputation: 159
I want to make recursive Modals with vanilla JS, i.e there's a button in each modal that opens another Modal inside the current Modal. So, I've a button that appends a div in a main parent div. The problem is that the button loses it's onClick Property.
Can somebody please explain, why's this happening.
var modal = document.getElementById('myModal');
console.log("InitButton",modal);
var modalParent = document.querySelector('.modalParent');
console.log("ModalParent",modalParent);
var initBtn = document.getElementById("initialModal");
console.log("InitButton",initBtn);
var btn = document.getElementById("modalButton");
console.log("InitButton",btn);
modalParent.addEventListener('click',clickHandler)
initBtn.onclick = function() {
modal.style.display = "block";
}
var i = 0
function clickHandler(e){
if(e.target.matches('.modalButton')){
clone = modal.cloneNode(true);
clone.id = "new_Clone_" + i;
console.log("ClassName", clone.id);
modalParent.appendChild(clone);
i++;
}
}
This is the JS file
The HTML file is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="Head">
<button id = "initialModal">Open Modal</button>
<div class="modalParent" id = "modalParent">
<div class="modal" id = "myModal">
<div class="modal-content">
<p>Some Text in Modal</p>
<button id = "modalButton">Open Modal</button>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Upvotes: 0
Views: 43
Reputation: 68443
Your issue was basically this line (matches is used wrongly)
if(e.target.matches('.modalButton')){ //you are matching a class while the modalButton has an id
Also as per same doc (link shared above) this is a non-standard API, so replace it with simple match
if (e.target.id.match('modalButton'))
var modal = document.getElementById('myModal');
console.log("InitButton", modal);
var modalParent = document.querySelector('.modalParent');
console.log("ModalParent", modalParent);
var initBtn = document.getElementById("initialModal");
console.log("InitButton", initBtn);
var btn = document.getElementById("modalButton");
console.log("InitButton", btn);
modalParent.addEventListener('click', clickHandler);
initBtn.onclick = function() {
modal.style.display = "block";
};
var i = 0;
function clickHandler(e)
{
if (e.target.id.match('modalButton'))
{
clone = modal.cloneNode(true);
clone.id = "new_Clone_" + i;
console.log("ClassName", clone.id);
modalParent.appendChild(clone);
i++;
}
}
<div class="Head">
<button id="initialModal">Open Modal</button>
<div class="modalParent" id="modalParent">
<div class="modal" id="myModal">
<div class="modal-content">
<p>Some Text in Modal</p>
<button id="modalButton">Open Modal</button>
</div>
</div>
</div>
</div>
Upvotes: 1