Вкладки страниц и JS: getElementbyId не работает?

Question

Я пытался внедрить полные вкладки отсюда в мой php-код.У меня только одна проблема: кажется, что часть скрипта с getElementbyId не работает.

Он должен активировать кнопку, содержащую id = "defaultOpen", поэтому одна вкладка уже открыта браузером.Вы можете увидеть логику в примере выше.

Я дважды проверил все (особенно эхо), не вижу, какую ошибку я здесь делаю.

Это сценарий:

<script>
function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}

// Show the specific tab content
document.getElementById(pageName).style.display = "block";

// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Этомой код:

echo'<button class="tablink" onclick="openPage('; echo"'Home', this, 'red')"; echo'">Home</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Kader', this, 'green')"; echo'" id="defaultOpen">Kader</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Statistik', this, 'blue')"; echo'">Statistik</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Vertrage', this, 'orange')"; echo'">Vertrage</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Archiv', this, 'orange')"; echo'">Archiv</button>';

// Menü
echo'<div id="Home" class="tabcontent">';
  include 'all_home.php';
 echo'</div>';
echo'<div id="Kader" class="tabcontent">';
  include 'all_kader.php';
 echo'</div>';
echo'<div id="Statistik" class="tabcontent">';
  include 'all_statistik.php';
 echo'</div>';
echo'<div id="Vertrage" class="tabcontent">';
  include 'all_verträge.php';
 echo'</div>';
echo'<div id="Archiv" class="tabcontent">';
  include 'all_archiv.php';
 echo'</div>';

CSS это:

/* Style tab links */
.tablink {
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 20%;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    color: white;
    display: none;
    padding: 55px 5px;
    height: 100%;
}

#Home {
    background-image: url("bg.png");
    background-color: white;
    }
#Kader {
    background-image: url("bg.png");
    background-color: white;
    }
#Statistik {
    background-image: url("bg.png");
    background-color: white;
    }
#Verträge {
    background-image: url("bg.png");
    background-color: white;
    }
#Archiv {
    background-image: url("bg.png");
    background-color: white;
    }

Answer 1

Поскольку нажатие любой из ваших кнопок просто вызывает функцию openPage, почему бы просто не вызвать функцию openPage при первой загрузке, вместо того, чтобы пытаться смоделировать нажатие кнопки, чтобы сделать то же самое?Другими словами, измените это:

document.getElementById("defaultOpen").click();

на это:

openPage('Kader', document.getElementById("defaultOpen"), 'green');