Function upTo Out Of Scope

JavaScript
1

jslint doesn’t consider this out of scope:

(function iife() {
    "use strict";


    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }

    function togglePlayButton(button) {
      var player = button.querySelector("audio");
      var play = button.querySelector(".play");
      var pause = button.querySelector(".pause");
      player.volume = 1.0;
      if (player.paused) {
        hide(play);
        show(pause);
        player.play();
        button.classList.add("active");
      } else {
        button.classList.remove("active");
        show(play);
        hide(pause);
        player.pause();
      }

    }
    
   function upTo(el, selector) {
     while (el.matches(selector) === false) {
       el = el.parentNode;
     }
     return el;
   }

function getPlayButton(el) {
    return upTo(el, ".playButton");
}

  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    togglePlayButton(button);
  }

  var playButton = document.querySelector(".playButton");
  playButton.addEventListener("click", playButtonClickHandler);
  
}());

But it considers this out of scope.

What’s the difference?


 (function iife() {
   "use strict";


   function show(el) {
     el.classList.remove("hide5");
   }

   function hide(el) {
     el.classList.add("hide5");
   }

   function togglePlayButton(button) {
     var link = upTo(button, ".links5");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play5");
     var pause = button.querySelector(".pause5");
     button.classList.add("playing");
     hide(button.querySelector(".initial5"));
     link.classList.remove("inactive");
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

   }
   
      function upTo(el, selector) {
     while (el.matches(selector) === false) {
       el = el.parentNode;
     }
     return el;
   }


   function playButtonClickHandler(evt) {
     var button = upTo(evt.target, ".playButton5")
     togglePlayButton(button);
   }

   document.querySelector(".links5").classList.add("inactive");

   var playButton = document.querySelector(".playButton5");
   playButton.addEventListener("click", playButtonClickHandler);


 }());
2

When a line uses a function that hasn’t been declared somewhere above that line, that function is said to be out of scope.

I recommend that you move the upTo function further up, so that it’s by those hide/show functions.

1 Like
3

Generally speaking, should these be further up also, or is there a difference between these and upTo?

These below don’t use upTo.

while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {

while (el.classList.matches(selector) === false) {
``` https://jsfiddle.net/j2g8e7k6/21/
4

It does make sense for the getPlayButton() function to occur before the togglePlayButton() due to the order that those are used in the handler function.

5

So like this then.

  (function iife() {
    "use strict";

    function getPlayButton(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }

    function togglePlayButton(button) {
6

Just above the togglePlayButton() function is the best place for the getPlayButton() function, for that then lets the more utilitarian functions like show/hide/upTo stay together above them.

7

First thing right above:
function togglePlayButton(button) {

1.)

  (function iife() {
    "use strict";

    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }

    function getPlayButton(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function togglePlayButton(button) {

2.)

(function iife() {
    "use strict";

    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }

  function upTo(el, selector) {
     while (el.matches(selector) === false) {
       el = el.parentNode;
     }
     return el;
   }

function getPlayButton(el) {
    return upTo(el, ".playButton");
}

function togglePlayButton(button) {
1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.