Javascript: не определено при доступе к родительскому элементу

Question

Я новичок в JS и не могу понять, почему мой код возвращает неопределенное значение (он перенастраивается в функции при присвоении таблиц var значения. Что может быть не так?

  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

Ваша функция ничего не возвращает, поэтому вам нужно куда-то вернуться, чтобы получить ответ на вызов функции.Но похоже, что вы просто хотите отформатировать с помощью этой функции.Ниже вашего кода может потребоваться небольшое изменение.Я полагаю, что thisTable является массивом, и parentRl не может быть определен.

var thisTable = document.getElementsByClassName(tableCl);
var parentEl = thisTable.parentElement;

Можете ли вы попробовать следующее?

var thisTable = document.getElementsByClassName(tableCl);
var parentEl = thisTable[0].parentElement;

Answer 2

document.getElementsByClassName возвращает массив.

 function showTableAndHideOther(tableCl) {
        var thisTables = document.getElementsByClassName('test');

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

Answer 3

Таким образом, вы не можете получить элемент warningtable test с помощью следующего кода

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

Измените его на

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