После перезагрузки страницы при нажатии на элемент не учитывается первое нажатие
// Open settings menu.
var settingsButton = document.getElementsByClassName('settings-button')[0];
var settingsBlock = document.getElementsByClassName('settings')[0];
function openSettingsBlock(event) {
console.log('ok');
console.log(settingsBlock.style.left);
if (settingsBlock.style.left == '-400px') {
settingsBlock.style.left = '0';
} else {
settingsBlock.style.left = '-400px';
}
}
settingsButton.addEventListener('click', openSettingsBlock);
.settings-button {
position: absolute;
background-image: url("/static/img/settings.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
height: 35px;
width: 35px;
z-index: 3;
}
.settings {
background-color: rgba(0, 0, 11, 0.85);
box-shadow: 0 0 20px black;
color: white;
min-height: 100%;
position: absolute;
top: 0;
left: -400px;
width: 350px;
z-index: 2;
transition: left 1s ease-out 0.1s;
}
<button class="settings-button">Btn</button>
<button class="settings">Settings</button>
Как понимаю, скрипт не имеет доступа к стилям, по какой-то причине. На первое нажатие в консоль выводится пустая строка, вместо значения settingsBlock.style.left. Последующие нажатия отрабатываются корректно. Подскажите, пожалуйста, как исправить