Estoy tratando de hacer una función para deshabilitar los botones según una consulta de medios. Esta función recibe un elemento DOM. Por alguna razón, recibí el siguiente error: TypeError no detectado: el.forEach no es una función cuando intento cambiar el tamaño de la ventana. Trato de depurar esto y parece que la primera ejecución funciona como se esperaba, pero luego el argumento cambia repentinamente de tipo a un evento y así es como obtuve el error. Entonces, no estoy seguro de por qué sucede esto o cómo solucionarlo.
<!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>