How to hide/show element via JS?

Question

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?

Answer 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
}

Answer 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

Answer 3

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

Answer 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.

Answer 5

Display property should be set to "block" and not "display".

Answer 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>

Answer 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