Трудности при работе с атрибутом hidden

Question

Хочу написать скрипт, которые при клике на заголовке скрывает div, когда тот виден, и, наоборот, когда div скрыт, то, чтобы отображался снова. То, что я предлагаю не работает, в чем проблема? И еще, почему когда я атрибуту hidden в html ставлю значение false, то получаю обратное действие на отображаемой странице (элемент пропадает, а не наоборот отображается, как было бы логически предположить)?

function clcHead() {
  if (document.getElementById('txt-area').hidden == false) {
    document.getElementById('txt-area').hidden = true;
  }
  if (document.getElementById('txt-area').hidden == true) {
    document.getElementById('txt-area').hidden = false;
  }
}

<body>
  <h1 onclick="clcHead()">Click on header</h1>
  <div id="txt-area" hidden="false">
  </div>
  <script>
  </script>
</body>

Answer 1

Может вы имеете ввиду display:none? Для чего вы используете атрибут hidden?

const header = document.querySelector("#header")

const handleClick = () => {
  const txtArea = document.querySelector("#txt-area")
  txtArea.hidden = !txtArea.hidden
}

header.addEventListener('click', handleClick)

#txt-area {
  width: 50px;
  height: 50px;
  background-color: red;
}

<h1 id="header">Click on header</h1>
<div id="txt-area" hidden="false">#
</div>

БЛОГ НА HUSL

Трудности при работе с атрибутом hidden

Ответы (1 шт):