Возможно ли скрыть div в зависимости от числа в другом?

Question

[Mracula]

Допустим есть такая конструкция:

<div class="div1">600</div>
<div class="div2">Текст</div>

Возможно ли при смене числа в меньшую сторону от 600 скрывать div2?

Comments

[WbICHA]

Возможно ли при смене числа в меньшую сторону от 600 скрывать div2?

Да, возможно.

[Froggyweb]

я бы призадумался про react или vue
можно все, но геммор будет расти в геометрической прогрессии

Answer 1

[seira-code]

Привет, можно.
Для скрытия объекта вы можете взаимодействовать с его стилями, то есть, можно установить ему свойство elem.style.display: 'none', что бы опять открыть elem.style.display: 'block' или elem.style.display: 'inline'

elem.style.display = 'none'; // скрыть
elem.style.display = 'block'; // показать - для блочных элементов (div, p)
elem.style.display = 'inline'; // показать - для встроенных элементов (span, a)

Так же можно использовать свойство elem.style.visibility
Настройка style.display будет выглядеть так, как будто элемент вообще отсутствует («удален»).

elem.style.visibility = 'hidden'; // скрыть, но позволяет элементу сохранить свой размер
elem.style.visibility = 'visible';

Вот что получилось у меня

<div id="div1" class="div1">500</div>
<div id="div2" class="div2">Текст</div>

body {
  background: #955231;
}

.div1 {
  background: white;
  width: 4rem;
  heigh: 4rem;
  margin-left: 70%;
}

.div2 {
  background-color: white;<code lang="javascript">

</code>
  width: 4rem;
  heigh: 4rem;
  margin-left: 30%;
}

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

if(+div1.innerHTML < 600 ) {
  div2.style.visibility = 'hidden'
} else {
    div2.style.visibility = 'visible'
}

Надеюсь не утомил и помог)

Answer 2

[Dmitry_Novik]

можно вот так скриптом:
https://codepen.io/Dmitry_Novik/pen/qBXprvJ
Повставляйте в инпут разные числа и нажимайте кнопку изменить.
Вообще куча способов на самом деле, все зависит от конкретной задачи.