Javascript:访问父元素时未定义

Question

我是 JS 新手，无法弄清楚为什么我的代码返回未定义(它正在分配var table值的函数中重新调整。可能是什么错了？

  function showTableAndHideOther(tableCl) {
            var thisTable = document.getElementsByClassName(tableCl);
            var parentEl = thisTable.parentElement;
            var tables = parentEl.getElementsByClassName("warningtable");
            for (var i = 0; i < tables.length; i++) {
                tables[i].style.display = "none";
            }
            thisTable[0].style.display = "";
          }

HTML 是:

 <div class="expandwarnings" style="display:none">
        <div id="BtnContainer"><button class="btn active" onclick="">Other test</button><button class="btn" onclick="showTableAndHideOther('test')">Filtering test</button></div>
        <table class="warningtable test" style="display:none">
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>

Answer 1

所以你无法通过以下代码获取元素warningtable test

var tables = parentEl.getElementsByClassName("warningtable");

修改为

var tables = document.getElementsByClassName("warningtable")[0];