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?

use this document.getElementById("trackdata").style.display = "block"; instead of doing this stuff document.getElementById("trackdata").style.display = "display"; — Jesper Martinez
– Jesper Martinez, Commented May 7, 2020 at 16:06
There is no HTML element with id = userinput. That is why it was not working. — ridoansaleh
– ridoansaleh, Commented May 7, 2020 at 16:11

Claudio Busatto · Accepted Answer · 2020-05-07 16:07:21Z

3

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
}

answered May 7, 2020 at 16:07

Claudio Busatto

7617 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John lewis Over a year ago

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

Claudio Busatto Over a year ago

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

John lewis Over a year ago

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

brk · Accepted Answer · 2020-05-07 16:06:51Z

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

Lakshya Thakur · Accepted Answer · 2020-05-07 16:03:22Z

0

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

answered May 7, 2020 at 16:03

Lakshya Thakur

8,3141 gold badge15 silver badges43 bronze badges

Comments

josh.trow · Accepted Answer · 2020-05-07 16:03:28Z

0

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.

answered May 7, 2020 at 16:03

josh.trow

4,90123 silver badges31 bronze badges

Comments

Bipin Singh Rawat · Accepted Answer · 2020-05-07 16:08:16Z

0

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

answered May 7, 2020 at 16:08

Bipin Singh Rawat

337 bronze badges

Comments

user13385097 · Accepted Answer · 2020-05-07 16:11:15Z

0

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>

answered May 7, 2020 at 16:11

user13385097

4 Comments

user13385097 Over a year ago

When you click the button, it will display it as a block. If you click it again, it will hide it...

user13385097 Over a year ago

You can keep clicking on the button too

user13385097 Over a year ago

if you want to make the top row shown always, move the part where it says: <div id="myDIV"> to the desired part, like: <div id="myDIV"> <table style = "width:90%" class = "trackdata" id ="trackdata"> //TRACKDATA and so on...

user13385097 Over a year ago

If you want a tutorial on it, go to: w3schools.com/howto/howto_js_toggle_hide_show.asp

Siddharth Shah · Accepted Answer · 2020-05-07 16:16:40Z

0

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

answered May 7, 2020 at 16:16

Siddharth Shah

644 bronze badges

Collectives™ on Stack Overflow

How to hide/show element via JS?

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related