Как скрыть внутренний div-элемент с помощью JavaScript?

Оффтоп javascript
1

Привет всем! У меня возникла проблема с сокрытием одного из элементов div на странице в зависимости от определенных условий. Ниже привожу измененный пример разметки:

<div id="containerBlock">
  <section id="experienceSection">
    <div class="header-filled" id="experienceFull">
      Опыт работы
    </div>
    <div class="header-empty" id="experienceEmpty">
      Опыт работы отсутствует
    </div>
  </section>
</div>

И вот обновленный код на JavaScript:

document.getElementById('experienceEmpty').style.display = 'block';
document.getElementById('experienceFull').style.display = 'none';

Несмотря на установку свойств, оба элемента остаются видимыми. Что я делаю не так? Буду благодарен за помощь!

2

Твой код вроде правильный, но могут быть нюансы. Проверь, что скрипт выполняется после загрузки DOM. Еще посмотри, нет ли конфликтов с CSS. Можно попробовать такой вариант:

window.onload = function() {
  document.getElementById('experienceEmpty').style.display = 'block';
  document.getElementById('experienceFull').style.display = 'none';
}

Если не поможет, покажи больше кода - может, проблема в другом месте.

3

А вы уверены, что JS-код выполняется после загрузки DOM? Попробуйте обернуть его в DOMContentLoaded или поместить скрипт в конец body. Еще вариант - проверьте, нет ли конфликтующих стилей CSS, которые могут перезаписывать ваши JavaScript-изменения. Может, стоит использовать !important или задавать стили через classList?