CODEWITHSUNDEEP
javascripthtmlcsserror-handling
MusicalUniverse
MusicalUniverse

Reputation: 11

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

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";

}

Upvotes: 1

Views: 2228

Answers (4)

audzzy
audzzy

Reputation: 741

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)

Upvotes: 0

Thanasis Balatsoykas
Thanasis Balatsoykas

Reputation: 176

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!

Upvotes: 0

Barmar
Barmar

Reputation: 782107

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');
});

Upvotes: 0

dwosk
dwosk

Reputation: 1257

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';
}

Upvotes: 1

Related Questions