Search code examples
javascriptmatchmedia

Passing a parameter from a parent to a child function, javascript


  function screenFunc(id) {
      var size = window.matchMedia("(max-width: 620px)")
      if (size.matches) { // If media query matches
        function myFunction(id) {
          var x = document.getElementById(id)
          if (x.style.display === 'none') {
            x.style.display = 'block';
          } else {
            x.style.display = 'none'
          }
        }
      }
    }
<section class="subject">
        <h2 onclick="screenFunc('intro')" class="title-toggle"> Introduction </h2>
        <p id="intro"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis laborum eligendi, nulla aliquid perspiciatis tempore cumque odit sapiente ut, reiciendis accusantium sint dolor. Ipsum eaque, quos esse incidunt, quod veniam sequi sint, voluptatem
          at quis impedit amet illum cupiditate explicabo! </p>
      </section>

I need to access an id in my HTML to toggle a paragraph. Since it is mobile first and responsive, the toggle is only needed with a max-width of 620, so I want to remove the javascript toggle anything larger than that. Can I pass the "id"-parameter from parent to child function like so? It's the first time, I'm using window.matchmedia, so feedback is appreciated.


Solution

  • There's no need for the second function. I think it probably does nothing, because the second function is never called. You could do something like this:

    function screenFunc(id) {
      var size = window.matchMedia("(max-width: 620px)")
      if (size.matches) { // If media query matches
          var x = document.getElementById(id)
          if (x.style.display === 'none') {
            x.style.display = 'block';
          } else {
            x.style.display = 'none'
          }
        }
    }
    <section class="subject">
      <h2 onclick="screenFunc('intro')" class="title-toggle"> Introduction </h2>
      <p id="intro"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis laborum eligendi, nulla aliquid perspiciatis tempore cumque odit sapiente ut, reiciendis accusantium sint dolor. Ipsum eaque, quos esse incidunt, quod veniam sequi sint, voluptatem at quis impedit amet illum cupiditate explicabo! </p>
    </section>