Question

I need to solve a problem on an old system we still use. I am busy converting a new system to jquery but these nuggets from the old system sometimes pop up.

The code below works great in Firefox but doesn’t work at all in Chrome or IE.

I have added a console.log(“test”) and this runs in Firefox but not in Chrome or IE.

Please let me know what’s the best way to do this in vanilla javascript so it’s cross browser friendly. Thanks

Code

function showlaptop(theTable)
{
  if (document.getElementById(theTable).style.display == 'none')
  {
        document.getElementById(theTable).style.display = 'block';
        console.log("test");
  }
}

function hidelaptop(theTable)
{
  if (document.getElementById(theTable).style.display == 'none')
  {
        document.getElementById(theTable).style.display = 'none';
  }
  else
  {
        document.getElementById(theTable).style.display = 'none';
  }
}

Answer 1

This should work in all browsers…

function showlaptop(theTable)
{
  if (document.getElementById(theTable).style.display == 'none')
  {
        document.getElementById(theTable).style.display = '';
        console.log("test");
  }
}

function hidelaptop(theTable)
{
  if (document.getElementById(theTable).style.display == '')
  {
        document.getElementById(theTable).style.display = 'none';
  }
  else
  {
        document.getElementById(theTable).style.display = 'none';
  }
}

that is, replace 'block' with ''

You do not need the second else BTW…

UPDATE:

As mentioned by Rob in the comments. The default display value for everything is not 'block', although, some browsers allow it, but those that follow the standards will not render the page accordingly…