window.matchMedia("(max-width: 1700px)"); does not work?

Question

Hey friends I'm trying to use window.matchMedia("(max-width: 1700px)") to add some elements in the html when the page is 1700px or smaller. Right now I'mk just trying to test it by have a function alert 'yo' to the screen. This doesn't work as well as other things I tried to change? Any ideas?

https://jsfiddle.net/yat5ncmk/6/

const ham = document.querySelector('.nav-box');
const menu = document.querySelector('.menu');
const menuClose = document.querySelector('#menu-close');
const leftArrow = document.querySelector('#left');
const rightArrow = document.querySelector('#right');
const img = document.querySelector('.image-slider');
var x = window.matchMedia("(max-width: 1700px)");
let num = 1;

x.addEventListener(adjustMenuDesign);
adjustMenuDesign(x);

ham.addEventListener('click', function() {
 ham.classList.add('ham-open');
 menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
 ham.classList.remove('ham-open');
 menu.style.marginLeft = '-700px';
})

leftArrow.addEventListener('click', function() {
 num--;
 if(num > 0) {
  img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
  console.log(num);
  console.log(img.style.backgroundImage);
 } else {
  num = 4;
  img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
 }
})

rightArrow.addEventListener('click', function() {
 num++;
 if(num <= 4) {
  img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
  console.log(num);
  console.log(img.style.backgroundImage);
 } else {
  num = 1;
  img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
 } 
})

function adjustMenuDesign(width) {
    if (width.matches) { // If media query matches
     alert('yo');
 } 
}

window.sr = ScrollReveal();

sr.reveal('.logo-wrap', {
 duration: 2000
});

sr.reveal('.w1', {
 duration: 2000,
 origin: 'bottom'
});

sr.reveal('.w2', {
 duration: 3000,
 origin: 'bottom'
});

sr.reveal('.w3', {
 duration: 4000,
 origin: 'bottom'
});

sr.reveal('.hours-line-left', {
 duration: 1000,
 origin: 'left',
 distance: '200px'
});

sr.reveal('.hours-line-right', {
 duration: 1000,
 origin: 'right',
 distance: '200px'
});

sr.reveal('.contact-line', {
 duration: 1000,
 origin: 'bottom',
 distance: '250px'
});

sr.reveal('.burrito', {
 duration: 1000,
 origin: 'right',
 distance: '250px'
});

sr.reveal('.taco', {
 duration: 1000,
 origin: 'right',
 distance: '250px'
});

sr.reveal('.guac', {
 duration: 1000,
 origin: 'right',
 distance: '250px'
});

sr.reveal('.nachos', {
 duration: 1000,
 origin: 'bottom',
 distance: '250px'
});

sr.reveal('.hot', {
 duration: 1000,
 origin: 'left',
 distance: '250px'
});

sr.reveal('.back-to-top', {
 duration: 1000,
 origin: 'bottom',
});

sr.reveal('.btp-arrow', {
 duration: 1500,
 origin: 'top',
 distance: '250px'
});

Try looking in your console log, this -> `x.addEventListener(adjustMenuDesign);` is invalid code. — Keith, May 22 '19 at 22:08
Oh duh, Thanks @Keith. Couple questions though. Alert seems to work now, but it only alerts once? when I adjust the width back and forth below and above 1700px it doesn't keep alerting? Also I tried changing the color of the arrow on the image slider(I have this declared as a const already) and this didn't work? — spabsa, May 22 '19 at 22:25
You will want to check again on resize. That's maybe what your `x.addEventListener(` was meant to do,.. I'll update your snippet here as an answer to show the changes. — Keith, May 22 '19 at 22:28
Also I tried `window.addEventListener('onresize', adjustMenuDesign);` and `x.addEventListener('onresize', adjustMenuDesign);` and `window.addEventListener('resize', adjustMenuDesign);` and `x.addEventListener('resize', adjustMenuDesign);` none of these worked? — spabsa, May 22 '19 at 22:46
Oh and Keith I got 2 more questions lol. 1. Why does the matchmedia need to be declared inside the function, why doesn't it work as a global? Also In my previous comment I wondered why I couldn't change the color to the right arrow on the image slider, well that variable was also a global so I brought it into the function and low and behold it changed colors? but it stays that color even when the width is higher than 1700px? — spabsa, May 22 '19 at 23:04
You never change it back, once you have set it to red it will stay. I've done another update that changes it to back to white,.. Also matchmedia doesn't have to be declared inside the function, I'm just not a fan of globals, but you will need to run the check again.. Here is an updated fiddle -> https://jsfiddle.net/1d5z62ab/ — Keith, May 22 '19 at 23:15
Oh I see. Thanks man its people like you that give self taught developers a chance. You have good one:) — spabsa, May 22 '19 at 23:39
Also do you think it would make any difference if I put anything in the else statement? If its only useful for switching back and forth what use would it have for someone viewing it on a smaller screen that less than 1700px and isn't even capable of going bigger? — spabsa, May 23 '19 at 02:49

score 1 · Accepted Answer · answered May 22 '19 at 22:45

A couple of problems..

x.addEventListener(adjustMenuDesign);

Errors, because addEventListener expects an event and a callback. But what you might have meant to do was add this to the resize event..

window.addEventListener("resize", adjustMenuDesign);

Also you will want to run the matchMedia query again on resize, so moving that piece of code into the adjustMenuDesign would make sense here.

Below is a working fiddle with these changes.

https://jsfiddle.net/veckopab/

window.matchMedia("(max-width: 1700px)"); does not work?

1 Answers1