Вечер всем добрый!
Прошу строго не судить, ибо только начинаю свой путь в web.
Проблема:
Сделал такой слайдер на js:
let buttonOne = document.querySelector('#control_1');
let buttonTwo = document.querySelector('#control_2');
let buttonThree = document.querySelector('#control_3');
let headerBackground = document.querySelector('.header')
buttonOne.onclick = function() {
buttonOne.classList.add('header-control__active');
headerBackground.style.backgroundImage = 'url(../img/header/ocean.jpg)';
buttonTwo.classList.remove('header-control__active');
buttonThree.classList.remove('header-control__active');
}
buttonTwo.onclick = function() {
buttonTwo.classList.add('header-control__active');
headerBackground.style.backgroundImage = 'url(../img/header/girl.jpg)';
buttonOne.classList.remove('header-control__active');
buttonThree.classList.remove('header-control__active');
}
buttonThree.onclick = function() {
buttonThree.classList.add('header-control__active');
headerBackground.style.backgroundImage = 'url(../img/header/child.jpg)';
buttonOne.classList.remove('header-control__active');
buttonTwo.classList.remove('header-control__active');
}
На live server(плагин VScode) все работает.
Если просто из папочки открыть html-файл, после клика на кнопку переключения слайдера, фоновое изображение пропадает.
Собственно вопрос: Почему?
Благодарю за внимание.
