В JS происходит изменение свойства display на block, а нужно flex. Команда есть, а js её не выполняет

Question

Пытаюсь сделать переход между блоками путём скрытия и показа их пользователю. Есть блок "приветствия", на которой ссылки. По нажатии на ссылку скрывается этот блок и появляется блок с необходимым контентом, но при это в атрибуте, нужного блока, style свойство display заменяется с none на block, хотя в js прописано document.getElementById('mem1').style.display = 'flex';

Код обработки:

<div class="lvlChanger" id="lvlChanger" style="display: block;">
  <form class="info">
    Игра "Найди пересонажа" схожа с всемиизвестной игрой "Найди пару". Вы должны совместить элемент и персонажа, который этим элементом владеет.<br>
    <a href="javascript: void(0)" onclick="document.getElementById('mem1').style.display = 'flex'; document.getElementById('lvlChanger').style.display = 'none'; " id="first">Первый</a>
    <a href="javascript: void(0)" onclick="document.getElementById('mem2').style.display = 'flex'; document.getElementById('lvlChanger').style.display = 'none';" id="second">Второй</a>
  </form>
</div>

<div class="mem1" id="mem1" style="display: none;">
  random text with example
</div>

В css у блока с id "mem1" у display стоит "flex". При обработке нажатия, по итогу, вместо "flex" в инспекторе отображается "block".

Answer 1

На первом скрине mem1, имевший display none стал block и в консоли тоже

.mem1{
    width: 650px;
    height: 650px;
    margin:  auto;
    display: flex;
    flex-flow: row wrap;
    perspective: 1000px;
}

Код выше - свойства, описанные в css файле

БЛОГ НА HUSL

В JS происходит изменение свойства display на block, а нужно flex. Команда есть, а js её не выполняет

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