[SOLVED] How can I change a button 'id' into a 'class' and use 'getElementByClassName'?

How can I change a button 'id' into a 'class' and use 'getElementByClassName'?

I need this button id for several buttons; that's why I want to change it into a class. But if I do so it does not work. Is this not possible to use getElementByClassName?

<button class="myBtn">Overlay</button>

So basically I want to change the id into a class. I tried to change getElementById into getElementByClassName. Unfortunately it does not work.

In the following I have added an example from W3Schools. Which is working with the id.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* The Overlay (background) */
    .overlay {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 1;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
      -webkit-animation-name: fadeIn;
      /* Fade in the background */
      -webkit-animation-duration: 0.4s;
      animation-name: fadeIn;
      animation-duration: 0.4s
    }


    /* Overlay Content */
    .overlay-content {
      position: fixed;
      bottom: 0;
      background-color: #fefefe;
      width: 100%;
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.4s;
      animation-name: slideIn;
      animation-duration: 0.4s
    }

    /* The Close Button */
    .close {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .overlay-header {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
    }

    .overlay-body {
      padding: 2px 16px;
    }

    .overlay-footer {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
    }

    /* Add Animation */
    @-webkit-keyframes slideIn {
      from {
        bottom: -300px;
        opacity: 0
      }

      to {
        bottom: 0;
        opacity: 1
      }
    }

    @keyframes slideIn {
      from {
        bottom: -300px;
        opacity: 0
      }

      to {
        bottom: 0;
        opacity: 1
      }
    }

    @-webkit-keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }
  </style>
</head>
<body>
  <h2>Overlay</h2>

  <!-- Trigger/Open The Overlay -->
  <button id="myBtn">Overlay</button>

  <!-- The Overlay -->
  <div id="overlay" class="overlay">

    <!-- Overlay content -->
    <div class="overlay-content">
      <div class="overlay-header">
        <span class="close">&times;</span>
        <h2>Container</h2>
      </div>
      <div class="overlay-body">
        <p>Container Information</p>
        <p>Some other text...</p>
      </div>
      <div class="overlay-footer">
        <h3>Footer</h3>
      </div>
    </div>

  </div>

  <script>
    // Get the overlay
    var overlay = document.getElementById('overlay');

    // Get the button that opens the overlay
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the overlay
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the overlay 
    btn.onclick = function() {
      overlay.style.display = "block";
    }

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

    // When the user clicks anywhere outside of the overlay, close it
    window.onclick = function(event) {
      if (event.target == overlay) {
        overlay.style.display = "none";
      }
    }
  </script>
</body>
</html>

Solution

You are looking for getElementsByClassName. getElementByClassName does not exist.