Создал скрипт, который работает при ширине экрана 820 пикселей. Данный скрипт при клике переключает цвет второму блоку Block_change, затем когда экран больше 820 пикселей, то цвет блока Block_change возвращается к исходному цвету(оранжевый) и клик по блоку перестает работать.
Суть проблемы: При изменении экрана в большую, затем в меньшую сторону(820px), клик по блоку работает через раз, а по задумке кликер должен работать нормально.
Я знаю, что неправильно повесил кликер, но не понимаю, как это исправить.
На этом сайте в редакторе не показывается суть проблемы, попробуйте у себя локально на компе.
let Block_click = document.querySelector(".Block_click");
let Block_change = document.querySelector(".Block_change");
const MediaQuery = window.matchMedia('(max-width: 820px)');
function RemoveClass(e) {
if (e.matches) {
Block_click.addEventListener('click', function() { // Я неправильно повесил обработчик, как это исправить?
Block_change.classList.toggle("change_color");
})
} else {
Block_change.classList.remove("change_color");
}
}
MediaQuery.addEventListener('change', RemoveClass);
RemoveClass(MediaQuery);
.Block_click {
user-select: none;
width: 200px;
background: gray;
font-size: 22px;
}
.Block_change {
margin-top: 20px;
width: 200px;
background: orange;
font-size: 22px;
}
.change_color {
background: red;
}
<div class='Block_click'>КЛИКЕР</div>
<div class='Block_change'>Смена цвета</div>