Display:'block' не работает так, как должен работать

Я хочу, чтобы таблица была видна только после нажатия кнопки submit. Но она не остается на экране, как это должно быть. Как только я нажимаю кнопку submit, таблица появляется на секунду, а затем снова становится невидимой. Пожалуйста, подскажите, что я делаю не так в своем коде. Также прошу сообщить, есть ли другой способ сделать это.

<div style="margin-left: 2rem;">
  <input class="btn btn-primary" 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>

I have edited your code and it works now - 

<div style="margin-left: 2rem;">
  <input class="btn btn-primary" 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>

В вашем коде есть синтаксическая проблема. функции hide не хватает фигурных скобок. Надеюсь, приведенный ниже код поможет вам.

 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 class="btn btn-primary" 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>

Вернуться на верх