javascript - 更改按钮功能时出现未捕获的引用错误

Question

我试图让一个按钮在元素具有子节点时显示模式。因此，当您单击它时，它会激活该功能并相应地显示模式，它会通过将 id“myBtn”添加到 button 元素来完成此操作。

这是我的 HTML:

<li id='parentNode'>
  <button onclick="child_check()" id="button" class='customer-btn'><a href='#'>Customer 6</a></button>
  <ul>
    <li id='childNode'>
      <a href='#'>Customer A</a>
    </li>
  </ul>
</li>

这是我的 JS:

<script>

    var modal = document.getElementById('myModal');
    // Get the button that opens the modal
    var btn = document.getElementById(" myBtn");
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
       modal.style.display = "block";
    }


    // When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
  }
    // When the user clicks anywhere outside of the modal, close it

// Check to see if the list element has a child
function child_check() {
  var child = document.getElementById("childNode");
  var parent_check = document.getElementById("parentNode").contains(child);
  var parent = document.getElementById("parentNode")
  var button = document.getElementById("button")
  if (parent_check){
    button.id += " myBtn";
    // Code that activates modal
    // Get the modal

    // When the user clicks on the button, open the modal 

  }
}


</script>

编辑

似乎可以工作，但仍然出现以下错误:

Uncaught TypeError: Cannot read property 'contains' of null at child_check (profile:259)

Answer 1

除了模态(我在这里没有看到模态代码)，您可能可以像这样在 += "myBtn" 行中添加一个空格，以成功为按钮提供“myBtn”的 ID。如果没有，只需使用简单的“=”并为其提供所需的所有 ID，并用空格分隔。