title: Issue changing javascript function based on media query with event handler
body: <p>Sorry if this is a basic question. I mainly work with design and am not entirely comfortable with JavaScript. </p>
  
  <p>I have a navigation menu which is prompted to display when clicking an SVG using an Event Listener. Based on the size of the screen on which the menu is being displayed I would like to change the function to a function stating a different height for the navigation on click. This way smaller devices will have a certain height navigation, and larger will have a different height as well.</p>
  
  <p>Here is the code as far as I have dabbled into it</p>
  
  <pre><code>// media query event handler
  if (matchMedia) {
  const mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
  }
  
  // media query change
  function WidthChange(mq) {
  if (mq.matches) {
  // at least 500px
  document.getElementById("onclick").addEventListener("click", menuSize);
  
   function menuSize() {
  document.getElementById("mobilemenu").style.height = "35%";
  document.getElementById("mobilemenu").style.opacity = "1";
  document.getElementById("movbilenav").style.opacity = "0";
  
  }
  
  } else {
  // less than 500px
  document.getElementById("onclick").addEventListener("click", menusizeL);
  
   function menusizeL() {
  document.getElementById("mobilemenu").style.height = "50%";
  document.getElementById("mobilemenu").style.opacity = "1";
  document.getElementById("movbilenav").style.opacity = "0";
  
  }
  }
  
  }
  </code></pre>
  
  <p>As of now I get no response at all when clicking the navigation menu. Thank you, and sorry if this is a rudimentary question.</p>