title: Javascript's getElementsByClassName() is unable to find proper classes
body: <p>I've been trying to do a simple form setup with tabs using a guide from: <a href="https://www.w3schools.com/howto/howto_js_form_steps.asp." rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_form_steps.asp.</a></p>
  
  <p>I have three divs with class="tab" inside a form, which I am trying to make visible/invisible using javascript:</p>
  
  <pre><code>var currentTab = 0; // Current tab is set to be the first tab (0)
  showTab(currentTab); // Display the current tab
  function showTab(n) {
        // This function will display the specified tab of the form...
        var x = document.getElementsByClassName("tab");
        x[n].style.display = "block";
  }
  </code></pre>
  
  <p>This is supposed to display the n'th tab but no tabs are visible when the page is loaded, moreover, both buttons (previous and next, see code below) are visible when the page is loaded and n = 0; I have tried to get this to work with different setups using:</p>
  
  <pre><code>&lt;script&gt; // code goes here &lt;/script&gt;
  </code></pre>
  
  <p>or simply including a separate .js file, embedding the script section into, head, body, html or even the form has been unsuccessful. All the while, I can run simple js commands at the start of the same script section, like: alert("test");. </p>
  
  <p>I am running the page on a Linux machine with a premade Bitnami LAMP stack. </p>
  
  <pre><code>&lt;!Doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles/login.css" /&gt;
      &lt;link rel="stylesheet" href="styles/main.css"&gt;
      &lt;link rel="stylesheet" href="styles/new_user.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
      &lt;script&gt;
  
  var currentTab = 0; // Current tab is set to be the first tab (0)
  showTab(currentTab); // Display the current tab
  
  function showTab(n) {
  
      // This function will display the specified tab of the form...
      var x = document.getElementsByClassName("tab");
      x[n].style.display = "block";
  
      //... and fix the Previous/Next buttons:
      if (n == 0) {
          document.getElementById("prevBtn").style.display = "none";
      } else {
          document.getElementById("prevBtn").style.display = "inline";
      }
      if (n == (x.length - 1)) {
          document.getElementById("nextBtn").innerHTML = "Submit";
      } else {
          document.getElementById("nextBtn").innerHTML = "Next";
      }
      //... and run a function that will display the correct step indicator:
      fixStepIndicator(n)
  }
  
  function nextPrev(n) {
  
      // This function should figure out which tab to display
      var x = document.getElementsByClassName("tab");
  
      // Hide the current tab:
      x[currentTab].style.display = "none";
      // Increase or decrease the current tab by 1:
      currentTab = currentTab + n;
      // if you have reached the end of the form... :
      if (currentTab &gt;= x.length) {
      //...the form gets submitted:
          document.getElementById("register_form").submit();
          return false;
      }
      // Otherwise, display the correct tab:
      showTab(currentTab);
  }
  
  // This manages step indicators.
  function fixStepIndicator(n) {
      // This function removes the "active" class of all steps...
      var i, x = document.getElementsByClassName("step");
      for (i = 0; i &lt; x.length; i++) {
          x[i].className = x[i].className.replace(" active", "");
      }
      //... and adds the "active" class to the current step:
      x[n].className += " active";
  }
  
  &lt;/script&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;/head&gt;
  &lt;body class="background"&gt;
      &lt;main class="wrapper"&gt;
          &lt;div id="parent"&gt;
              &lt;form id="register_form" action="" method="post"&gt;
                  &lt;h1&gt;New user:&lt;/h1&gt;
                  &lt;div style="text-align:center;"&gt;
                      &lt;span class="step"&gt;&lt;/span&gt;
                      &lt;span class="step"&gt;&lt;/span&gt;
                      &lt;span class="step"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div style="float:right; padding: 15px;"&gt;
                      &lt;button type="button" id="nextBtn" onclick="nextPrev(1)"&gt;Next&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div style="float:left; padding: 15px;"&gt;
                      &lt;button type="button" id="prevBtn" onclick="nextPrev(-1)"&gt;Previous&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="tab"&gt;
                          //content
                  &lt;/div&gt;
  
                  &lt;div class="tab"&gt;
                          //content
                  &lt;/div&gt;
  
                  &lt;div class="tab"&gt;
                         //content
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The tab class itself looks like and should be invisible by default:</p>
  
  <pre><code>.tab {
    display: none;
  }
  </code></pre>
  
  <p>I would like to find out why it is that the tabs in the form do not seem to be  influenced by the showTab function. I've been at this issue for hours and I am absolutely clueless, any help would be appreciated!</p>
  
  <p>Kind regards.</p>