Как скрыть элементы в Javascript - PullRequest
Новая
       84

Как скрыть элементы в Javascript

1 голос
/ 12 марта 2020

Я хочу, чтобы текст сначала не скрывался и после нажатия на кнопку отображался. Я был бы очень рад, если бы кто-то нашел ошибку в моем коде. 

function F1()
{
  var x = document.getElementById("step1DIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<!DOCTYPE html>
<html>

<body>

  <button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV">
    <p> text </p>
  </div>

</body>

</html>

Ответы [ 3 ]

1 голос
/ 12 марта 2020

Вам нужно придать ему начальный стиль, который скрывает его в HTML. 

function F1()
{
  var x = document.getElementById("step1DIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
  <button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV" style="display: none;">
    <p> text </p>
  </div>

Но встроенные стили плохого дизайна, лучше использовать класс с CSS. 

function F1()
{
  var x = document.getElementById("step1DIV");
  x.classList.toggle("hidden");
}
.hidden {
  display: none;
}
<button onclick="F1()"> <b>Step 1</b> </button>
  <div id="step1DIV" class="hidden">
    <p> text </p>
  </div>
0 голосов
/ 12 марта 2020

Я просто определил его как 'none' для начала: 

<div id="step1DIV" style="display: none">
0 голосов
/ 12 марта 2020

Попробуйте сначала установить display вашего step1 DIV на none. Либо с использованием встроенного стиля или CSS.

Вы также можете попробовать запустить свою функцию при загрузке страницы.

...