display:'block' is not working as it supposed to be-CodePudding

I want the table to be visible only after the submit button clicks. But It's not staying on the screen as it is supposed to be. Once I click the submit button, the table comes up for a second and then again becomes invisible. Please let me know what I am doing wrong in my code. Also please let me know if there is any other way to do it.

<div style="margin-left: 2rem;">
  <input  type="submit" value="Submit" id="btn" onclick="hide()">
</div>


<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
  <table style="display: none;" id="table">
    <tbody>

      <tr>

        <th scope="row">Profile No. : </th>

        <td>{{ProfileUID}}</td>

      </tr>

      <tr>

        <th scope="row">Name : </th>

        <td>{{Name}}</td>

      </tr>
    </tbody>
  </table>

</div>



<script>
  function hide() {

    let btn = document.getElementById("btn");

    let table = document.getElementById("table");

    if (table.style.display === 'none') {

      table.style.display = 'block';

    }
}
</script>

CodePudding user response：

I have edited your code and it works now -

<div style="margin-left: 2rem;">
  <input  type="submit" value="Submit" id="btn" onclick="hide()">
</div>


<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
  <table style="display: none;" id="table">
    <tbody>

      <tr>

        <th scope="row">Profile No. : </th>

        <td>{{ProfileUID}}</td>

      </tr>

      <tr>

        <th scope="row">Name : </th>

        <td>{{Name}}</td>

      </tr>
    </tbody>
  </table>

</div>



<script>
  function hide() {

    let btn = document.getElementById("btn");

    let table = document.getElementById("table");

    if (table.style.display === 'none') {

      table.style.display = 'table';

    }}
</script>

CodePudding user response：

your code has a syntax problem. function hide is missing curly braces. Hope the below code can help you.

 function hide() {

        let btn = document.getElementById("btn");

        let table = document.getElementById("table");

        if (table.style.display === 'none') {

          table.style.display = 'block';
  }
}

    <div style="margin-left: 2rem;">
      <input  type="submit" value="Submit" id="btn" onclick="hide()">
    </div>


    <div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
      <table style="display: none;" id="table">
        <tbody>

          <tr>

            <th scope="row">Profile No. : </th>

            <td>{{ProfileUID}}</td>

          </tr>

          <tr>

            <th scope="row">Name : </th>

            <td>{{Name}}</td>

          </tr>
        </tbody>
      </table>

    </div>