Solution 1 :

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
}

Solution 2 :

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

Solution 3 :

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

Solution 4 :

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.

Solution 5 :

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

Solution 6 :

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>

Solution 7 :

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

Problem :

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?

Comments

Comment posted by Jesper Martinez

use this

Comment posted by ridoansaleh

There is no HTML element with id = userinput. That is why it was not working.

Comment posted by John lewis

Whenever I used display = “block” or display = “inline-block” it doesn’t show the other styling e.g. text-align:center;

Comment posted by Claudio Busatto

Can you update your question including the expected style you wants to display? From the original question I could not find this problem you mentioned

Comment posted by John lewis

Ok, i edited the stylings I want to have in the table…and also explained what I need. Thanks

Comment posted by w3schools.com/howto/howto_js_toggle_hide_show.asp

If you want a tutorial on it, go to:

By

Leave a Reply

Your email address will not be published. Required fields are marked *