I'm trying to make a function to disable buttons depending on a media query. This function receives a DOM element. For some reason, I got the following error: Uncaught TypeError: el.forEach is not a function when I try to resize the window. I try to debug this and seems that the first run works as expected, but then the argument suddenly change of type to an event and that's how I got the error. So, I'm not sure why this is happening or how to fix this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<button class="test">Hey</button>
<button class="test">Hey</button>
<button class="test">Hey</button>
<button class="test">Hey</button>
<button class="test">Hey</button>
</div>
<script type="text/javascript">
const testElements = document.querySelectorAll('.test');
const handleDisabled = el => {
if (window.matchMedia('(min-width: 992px)').matches) {
el.forEach((te => {
te.setAttribute('disabled', '');
}));
} else {
el.forEach((te => {
te.removeAttribute('disabled');
}));
}
}
window.addEventListener('resize', handleDisabled);
handleDisabled(testElements);
</script>
</body>
</html>