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

Question

  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.

Why not just use plain CSS instead of getting JavaScript involved? — zero298, Jul 30 '18 at 17:42
Never declare functions inside `if()`. You also never call `myFunction()` — charlietfl, Jul 30 '18 at 17:43
@charlietfl im calling the function inline in my html , can you clarify why i shouldnt call within an "if conditional' or what i should do instead please — jose perez, Jul 30 '18 at 17:48
@zero298 really just trying to learn javascript a little better — jose perez, Jul 30 '18 at 17:48
I don't understand what you're trying to do, exactly. You've declared a function called `myFunction` but you never call it or `return` it. If you want to call it immediately, then you don't want a function at all: you just want to run some code inside your `if` statement. If you want to `return` it, so that something else can call the function, you can simply omit the `id` argument on `myFunction`; the function will inherit the `id` variable from its containing lexical scope. — apsillers, Jul 30 '18 at 17:48
you can't call `myFunction()` in html because it is only scoped inside `screenFunc()` — charlietfl, Jul 30 '18 at 17:49
@charlietfl is telling you not to define a function in an `if` block because the language specification doesn't specify behavior for function declarations inside blocks. (Namely, is the function hoisted to the top of the containing scope or not? Because this behavior is unspecified, implementations differ.) Related: https://stackoverflow.com/q/17409945/710446 — apsillers, Jul 30 '18 at 17:53
i updated the post with a code snippet i hope it helps understand my intention and thought process, and how to direct me better. i meant to run a parent function wich i would call to check the screen size first, then if it matches run a "nested" function that allows the toggle. @charlietfl — jose perez, Jul 30 '18 at 17:55

score 2 · Accepted Answer · edited Jul 30 '18 at 18:05

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>

Thank You brother not only did you simplify and direct my thinking, but you made my code shorter with a solution gracias saludos — jose perez, Jul 30 '18 at 18:06

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

1 Answers1