按钮失去参考

我想用香草JS制作递归模态，即，每种模态中都有一个按钮，可以在当前模态内打开另一个模态。因此，我有一个按钮，该按钮在主要父母div中附加了一个div。问题是按钮失去了它的属性属性。

有人可以解释一下，为什么会发生这种情况。

    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++; 
    } 
}

这是JS文件

HTML文件是

<!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>

您的问题基本上是此行（匹配是错误使用的）

if(e.target.matches('.modalButton')){ //you are matching a class while the modalButton has an id

也按照同一文档（上面共享的链接）这是一个非标准的API，因此请用简单的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>

相关内容

最新更新

热门标签：