Home>
Created a script that works with a screen width of 820 pixels. This script switches the color of the second block Block_changewhen clicked, then when the screen is more than 820 pixels, the color of the Block_changeblock returns to its original color (orange) and clicking on the block stops working.
The essence of the problem: When you change the screen to a large, then to a smaller side (820px), clicking on the block works every other time, but according to the idea, the clicker should work fine.
I know I hung the clicker wrong, but I don't know how to fix it.
On this site, the editor does not show the essence of the problem, try it locally on your computer.
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() { //I hung the event listener incorrectly, how can I fix this?
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: grey;
font-size: 22px;
}
.Block_change {
margin-top: 20px;
width: 200px
background: orange;
font-size: 22px;
}
.change_color {
background: red;
}
<div class='Block_click'>CLICKER</div><div class='Block_change'>Color change</div>
Related questions
- javascript : Block scrolling by clicking on the arrows
- javascript : Console gives error "Uncaught TypeError: Cannot read properties of null (reading 'style')" [duplicate]
- javascript : How to change the color of the scale in the video?
- javascript : html css + js how to position two charts (Chart_js) side by side rather than one below the other
- javascript : How to highlight one whole line in long HTML text
- javascript : How to emulate safari browser on windows
- javascript : Console throws an error: Uncaught TypeError: Cannot set properties of null (setting 'src')
- javascript : Why won't the animation start?
- javascript : Dropdown menu on click