title: Why is my javascript throwing a "cannot read property style of null"?
body: <p>Below is the relevant javascript code. I am passing the right value to the method, which is used for the document.getElementById(tabName).style.display = 'block' line (where the error is). I created the new ID element, and am passing that through. I don't understand.</p>
  <p>Line with error: document.getElementById(tabName).style.display = 'block';
  Its at the very end.</p>
  <p>Thank you for the help, I am a bit new and may not fully understand the complex parts of this. I could really use the help.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addTab() {
  
    //create a new div element
    const newDiv = document.createElement('div');
  
    //create the id and add tab content class
    newDiv.id = "newtab"; //sets id name for div
    newDiv.classList.add("tablinks"); //sets class for div
  
    //give tab some text
    const tabContent = document.createTextNode("Testing the add tab button!");
    newDiv.appendChild(tabContent);
  
    //create the tab
    var btn = document.createElement("button"); //creates button
    btn.className = "tablinks"; //sets class for button
  
    //give onclick event to button
    var event = Event;
    btn.onclick = openTab(event, 'newtab');
    document.getElementByClassName("tab").appendChild(btn);
  
    //add the newly created element and its content into the DOM
    const currentDiv = document.getElementById("addnewtab");
    document.body.insertBefore(newDiv, currentDiv);
  }
  
  /* RECENT 10-K NOTIFICATION FEED START */
  function openTab(evt, tabName) {
  
    var i, tablinks;
    let tabcontent = document.getElementsByClassName("tabcontent");
  
    for (let tab of tabcontent) {
      tab.style.display = "none";
    }
  
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
  
    tablinks = document.getElementsByClassName("tablinks");
  
  
  
    for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  
    document.getElementById(tabName).style.display = 'block';
    evt.currentTarget.className += " active";
  
  }</code></pre>
  </div>
  </div>
  </p>