Как сделать DIV по умолчанию установленным в style.display = "none"? - PullRequest
Новая
       60

Как сделать DIV по умолчанию установленным в style.display = "none"?

0 голосов
/ 07 октября 2019

Я пытаюсь создать кнопку, которая будет отображать дополнительный текст при нажатии, однако я могу сделать это только

  • a) отображать текст по умолчанию или
  • б) скрыть текст по умолчанию, но кнопка не работает.

Вот код JS для кнопки: 

function showInfo() {
  var x = document.getElementById("myDIV");
  
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
 Hello World
</div>
<button type="button" class="btn btn-primary" click="showInfo()">
Show Info
</button>

Есть ли способ установить по умолчанию значение style.display, равное none?

Ответы [ 3 ]

1 голос
/ 07 октября 2019

Вам следует использовать CSS для установки стиля по умолчанию для любого элемента - либо путем ссылки на внешний файл CSS, либо между открывающими и закрывающими тегами <style> в вашем HTML-файле.

Вот так 

#myDIV {
  display: none;
}
0 голосов
/ 07 октября 2019

Ваш обработчик click. Это должно быть onclick. Также я рекомендую либо добавить класс с display:none к вашему div, либо просто вставить его, например, так: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV" style="display: none">
 Hello World
</div>
<button onclick="showInfo()">
Show Info
</button>

Тогда ваш JS может выглядеть так: 

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}

Демо 

function showInfo() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    return x.style.display = "block";
  }
  return x.style.display = "none";
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="myDIV" style="display: none">
     Hello World
    </div>
    <button onclick="showInfo()">
    Show Info
    </button>
0 голосов
/ 07 октября 2019

Кажется, нет проблем с вашим кодом JS.

Вместо

Исправьте ваш HTML, он «onclick», а не просто «click» 

<button onclick="showInfo()">
...