Javascript Reading ClassName hatası

  <button class="w3-bar-item w3-button tablink" onclick="openLink(event, 'Top')">Top</button>
<div id="Top" class="w3-container content w3-animate-top">
    <h2>Slide in from topfd</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
  </div>

<script>
function openLink(evt, animName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("content");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(animName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}
</script>

<div class="warning-button w3-bar-item w3-button tablink " onclick="openLink(event, 'Top')">
          <div class="warning-title">Osmanlı Tarihi Üzerine Ufak İnceleme</div>
        </div>

        <div class="warning-button w3-bar-item w3-button tablink" onclick="openLink(event, 'Top')">
          <div class="warning-title" >Tarih Kaynaksız Olmaz !</div>
        </div>

        <div class="warning-button w3-bar-item w3-button tablink" onclick="openLink(event, 'Top')">
          <div class="warning-title" >Gerçekçi Tarih !</div>
        </div>

        <div class="warning-button w3-bar-item w3-button tablink" onclick="openLink(event, 'Top')">
          <div class="warning-title">Tarafsızlık Şart !</div>
        </div> <!-- Buton görevi görüyorlar --->

 <div class="content-area w3-animate-top buttons" id="Top">

        <div class="content-title">
          <h4>623 Yıllık Saltanat</h4>
        </div>

        <div class="content-container">

          <div class="content-box">
            <div class="content-box-icon"><i class="fa-solid fa-timeline"></i></div>
            <div class="ingrediant">
              <span>623 Yıllık İmparatorluğun kısa özeti. Anlaşılır görsellerle desteklenmiş. 3 kıta hüküm. 5 farklı başkent. </span>
            </div>
          </div>

          <div class="content-box">
            <div class="content-box-icon"><i class="fa-solid fa-star"></i></div>
            <div class="ingrediant">
              <span>Söğüt, İznik, Bursa Edirne, İstanbul. 5 Farklı Başkentlik.</span>
            </div>
          </div>

          <div class="content-box">
            <div class="content-box-icon"><i class="fa-solid fa-crown"></i></div>
            <div class="ingrediant">
              <span>36 Hükümdar. </span>
            </div>
          </div>

        </div>

      </div> <!--- Butona tıklandığında içeriğin değişeceği alan ve içerikler ----->

      <script type="text/javascript">


        function openLink(evt, animName) {
    var i, x, tablinks;
    x = document.getElementsByClassName("buttons");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
      tablinks[i].className = tablinks[i].className.replace("w3-red", "");
    }
    document.getElementsById(animName).style.display = "block";
    evt.currentTarget.className += "w3-red";
  }
        </script> // Kendi Javascript uyarlama kodum