Why is my javascript throwing a "cannot read property style of null"?

Question

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.

Line with error: document.getElementById(tabName).style.display = 'block'; Its at the very end.

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.

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 < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");



  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = 'block';
  evt.currentTarget.className += " active";

}

Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — VLAZ, Sep 29 '20 at 20:44
You're calling `openTab()` before you insert `newDiv` into the DOM. — Barmar, Sep 29 '20 at 20:45
The value you assign to `btn.onclick` should be a function, not the result of calling the function. — Barmar, Sep 29 '20 at 20:46
Not really. I guess im just having a hard time figuring out the solution from other questions? Im usually doing something different from them. I am making the div element and button right in the javascript method rather than passing it through. — MusicalUniverse, Sep 29 '20 at 20:48
I moved the "add newly created element..." section to before the method is called, which fixed that part. Now i am getting an error saying "Cannot read property 'className' of undefined". The last line of the javascript code. — MusicalUniverse, Sep 29 '20 at 20:50
Where is Event defined? It seems like it doesn't have a "currentTarget" property. That part is missing in the code you posted.. — audzzy, Sep 29 '20 at 21:20
if you're trying to set the onclick event of the button, you need to give the event handler method to onClick. btn.onClick = openTab; and maybe give the button an attribute of what id the tab linked to it has.. btn.setAttribute('tabId', 'newtab'); — audzzy, Sep 29 '20 at 21:31
that way you can use it in openTab.. document.getElementById(evt.currentTarget.tabId).style.display = 'block'; — audzzy, Sep 29 '20 at 21:37

score 1 · Answer 1 · answered Sep 29 '20 at 20:46

The error you are seeing "Cannot read property style of null" means it's trying to access the style property of the element returned by document.getElementById(tabName).

If this element is not found (returns null), then you'll see exactly the error message you have.

To avoid the error, I recommend adding a type guard before accessing the style property:

let tabEl = document.getElementById(tabName);
if (tabEl) {
  tablEl.style.display = 'block';
}

audzzy · Answer 2 · 2020-09-29T20:52:59.560

0

It seems that there is no element with the id that is given for tabname. try moving:

 const currentDiv = document.getElementById("addnewtab");
 document.body.insertBefore(newDiv, currentDiv);

in addTab function (before the call to openTab)

edited Sep 29 '20 at 20:52

answered Sep 29 '20 at 20:46

audzzy

733
1
2
12

score 0 · Answer 3 · answered Sep 29 '20 at 20:49

The problem is here:

  //give onclick event to button
  var event = Event;
  btn.onclick = openTab(event, 'newtab');

You're calling the openTab() event immediately during the assignment, not calling it when the button is clicked. The value of the onclick property needs to be a function.

You also shouldn't use the global Event object as the argument here, it should receive the event that triggered the onclick.

Use this:

btn.addEventListener("click", function(event) {
    openTab(event, 'newtab');
});

score 0 · Answer 4 · answered Sep 29 '20 at 20:51

The problem lies in the fact that you have not rendered the element that you are trying to get with

document.getElementById(tabName).style.display = 'block';

You are first setting the onclick event and then actually adding the element to the dom on the last line

document.body.insertBefore(newDiv, currentDiv);

so just change the function addTab to

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;

    //add the newly created element and its content into the DOM
    const currentDiv = document.getElementById("addnewtab");
    document.body.insertBefore(newDiv, currentDiv);

    btn.onclick = openTab(event, 'newtab');
    document.getElementByClassName("tab").appendChild(btn);
}

There you go!

Why is my javascript throwing a "cannot read property style of null"?

4 Answers4