CODEWITHSUNDEEP
javascripthtml
Clarskon
Clarskon

Reputation: 159

Button Loosing Reference after .appendChild

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

Answers (1)

gurvinder372
gurvinder372

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

Related Questions