Блог

Главная - Вопросы по программированию - Скрыть/Показать элемент при нажатии JS не работает должным образом

Скрыть/Показать элемент при нажатии JS не работает должным образом

#javascript #html #toggle

Вопрос:

У меня есть простая функция, когда я нажимаю на кнопку, чтобы отобразить текст для кнопки, все в порядке, но при первом щелчке она не работает, а затем после второго щелчка она работает идеально, может ли кто-нибудь сказать мне, в чем моя ошибка? У меня есть элемент, скрытый в отображении CSS;его нет, вот моя логика

 function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
} 
     #myDIV {
        display: none;
    } 
 <button type="button" class="btn btn-primary btn-lg btn-block" onclick="myFunction()">

  <div id="myDIV">
    This is my DIV element.
  </div>

Комментарии:

1. Вы никогда не закрываете элемент кнопки, поэтому, когда вы показываете свой div, браузер включает его в качестве содержимого внутри кнопки.

2. <button type=»button» class=»btn btn-primary btn-lg btn-block»onclick=»myFunction()»>Правни аспекти на човечки ресурсиn</button> Он закрыт, просто не скопировал его должным образом

3. Просто добавьте style="display:none" в myDiv . В первый раз, когда вы ищете x.style.display , нет стиля отображения, поэтому он всегда устанавливается none . После этого появляется дисплей, и он работает так, как вы ожидаете.


Ответ №1:

Проблема, вероятно, в том, что вы не закрыли тег кнопки. Поэтому он не находит myFunction(). Вам также необходимо получить вычисленное значение стиля отображения, а не значение элементов, поскольку файлы css напрямую не влияют на стили элементов. (например, vs style=»»)

 <body>
    <script>
      function myFunction() {
        var x = document.getElementById("myDIV");
        if (getComputedStyle(x).display === "none") {
          x.style.display = "block";
        } else {
          x.style.display = "none";
        }
      }
    </script>
    <button
      type="button"
      class="btn btn-primary btn-lg btn-block"
      onclick="myFunction()"
    >
      test
    </button>

    <div id="myDIV">
      This is my DIV element.
    </div>
  </body>

Комментарии:

1. Он закрыт, все еще не работает на первом щелчке

2. Основная проблема заключается не в закрытии, а скорее в отсутствии атрибута style='display: none .

3. @levche66 Я отредактировал свой ответ. Теперь в нем также показано, как извлекать вычисленные стили

Метки: