The value display is not supported for the property display. When you want to show the element, you should use the value block instead.

You can read more about the accepted values here.

function searchtrack(){
   var input = document.getElementById("userinput").value;
   document.getElementById("trackdata").style.display = "block"; //Display trackdata
   document.getElementById("notrackdata").style.display = "none"; //Hide notrackdata
}

Create a class and add it to trackdata. On click add this class to notrackdata and remove from trackdata

function searchtrack() {
  //var input = document.getElementById("userinput").value;
  document.getElementById("trackdata").classList.remove('hide')
  document.getElementById("notrackdata").classList.add('hide')
}

.hide {
  display: none;
}

table {
  border: 1px solid green;
}

<button class="far fa-file-audio fa-3x" id="audiotrack" onclick="searchtrack()">Hide</button>

<table style="width:90%" class="notrackdata" id="notrackdata"> //NOTRACKDATA
  <tr>
    <th>NO TRACK DATA TO SHOW<br><img class="fas fa-sad-tear fa-2x" id="tear"></th>
  </tr>
</table>

<table style="width:90%" class="trackdata" id="trackdata"> //TRACKDATA
  <th>
    <tr class="trackrow hide">
      <td>Album Cover</td>
      <td>Album Title</td>
      <td>Artist</td>
      <td>Track Preview</td>
    </tr>
  </th>
  <tbody>
    <tr>
      <td><img src="https://e-cdns-images.dzcdn.net/images/artist/72f073a5829b368025b49c460b4b1918/250x250-000000-80-0-0.jpg" id="imageBox"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
JS

display = “block” not “display” for including the element in the DOM.

The display attribute takes ‘block’, ‘inline’, ‘inline-block’, or ‘none’ as values. If you change display="display" to display="block" you will see your element.

Display property should be set to “block” and not “display”.

Try using this to show and hide the table: (click the button to toggle)

<button class="far fa-file-audio fa-3x" id = "audiotrack" onclick="myFunction()">Show/hide</button>
<div id="myDIV">
<table style = "width:90%" class = "notrackdata" id = "notrackdata"> //NOTRACKDATA 
    <tr>
        <th>NO TRACK DATA TO SHOW<br><img class = "fas fa-sad-tear fa-2x" id ="tear"></th>
    </tr>
</table><br>

<table style = "width:90%" class = "trackdata" id ="trackdata"> //TRACKDATA
    <th >
        <tr class = "trackrow">
            <td>Album Cover</td>
            <td>Album Title</td>
            <td>Artist</td>
            <td>Track Preview</td>
        </tr>
    </th>
    <tbody>
        <tr>
            <td><img src ="https://e-cdns-images.dzcdn.net/images/artist/72f073a5829b368025b49c460b4b1918/250x250-000000-80-0-0.jpg" id = "imageBox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</div>
<style>
#myDIV {
  width: 100%;

  text-align: center;

  margin-top: 20px;
}
</style>
<script>
function myFunction() {
 var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
<style>
.hide {
  display: none;
}

table {
  border: 1px solid green;
}
</style>

Display property is used to hide/show elements.You have used “display” as a property value.Use “block” instead of “display”

Change it to this

document.getElementById("trackdata").style.display = "block";

So final Js code will be like this:-

function searchtrack()
{
   var input = document.getElementById("userinput").value;
   document.getElementById("trackdata").style.display = "block"; //Display trackdata
   document.getElementById("notrackdata").style.display = "none"; //Hide notrackdata
}

For more info – Hide/show element

I want to show the the table “trackdata” and hide “notrackdata” table whenever I click the button. As of now the table “notrackdata” hides but “trackdata” doesn’t show.

HTML

<button class="far fa-file-audio fa-3x" id = "audiotrack" onclick = "searchtrack()"></button>

<table style = "width:90%" class = "notrackdata" id = "notrackdata"> //NOTRACKDATA 
    <tr>
        <th>NO TRACK DATA TO SHOW<br><img class = "fas fa-sad-tear fa-2x" id ="tear"></th>
    </tr>
</table>

<table style = "width:90%" class = "trackdata" id ="trackdata"> //TRACKDATA
    <th >
        <tr class = "trackrow">
            <td>Album Cover</td>
            <td>Album Title</td>
            <td>Artist</td>
            <td>Track Preview</td>
        </tr>
    </th>
    <tbody>
        <tr>
            <td><img src ="https://e-cdns-images.dzcdn.net/images/artist/72f073a5829b368025b49c460b4b1918/250x250-000000-80-0-0.jpg" id = "imageBox"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

JS

function searchtrack(){
   var input = document.getElementById("userinput").value;
   document.getElementById("trackdata").style.display = "display"; //Display trackdata
   document.getElementById("notrackdata").style.display = "none"; //Hide notrackdata
}

CSS

.trackdata{
   background-color: #DCDCDC;
   margin:auto;
   margin-top:1%;
   text-align: center;
}

If I use display =”block”; and display = “inline-block I lose the CSS stylings. How can I make sure to keep the stylings while displaying the table as block or inline-block?