I'm receiving a "script error"

asasass · July 27, 2021, 11:39pm

Leaving it in the code I am able to know what it was before, and if I see it, that will remind me to change it.

Paul_Wilkins · July 27, 2021, 11:42pm

That is a widely known bad reason to do so. You are now breaching “good-practice”.

asasass · July 27, 2021, 11:43pm

So I know, if I see it in older codes, I will know it needs to be changed.

Paul_Wilkins · July 28, 2021, 12:02am

It’s the linter that should tell you that kind of thing. Comments are the wrong way to do that.

asasass · July 29, 2021, 7:48pm

Why am I receiving these errors?

Don’t wrap function literals in parens.(function manageCurtain() {

17: 3

Wrap an immediate function invocation in parentheses to assist the reader in understanding that the expression is the result of a function, and not the function itself.})();

https://jsfiddle.net/k703cnzp/

(function manageCurtain() {
  "use strict";

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

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    //hide(cover);
    const curtain = document.querySelector(".inner");
    curtain.classList.add("slide");
  }

  const cover = document.querySelector(".jacketwrap");
  cover.addEventListener("click", coverClickHandler);
})();

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addPlayer(video) {

    const playlist = "M7lc1UVf-VE";
    const config = {
      height: 393,
      host: "https://www.youtube-nocookie.com",
      width: 699
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady,
      "onStateChange": onPlayerStateChange
    };
    player = new YT.Player(video, config);

  }

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".jacketwrap");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}

(function iife() {
  "use strict";

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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.parentElement;
    show(wrapper);
    videoPlayer.play();
  }
  const cover = document.querySelector(".jacketwrap");
  cover.addEventListener("click", coverClickHandler);
}());

asasass · July 29, 2021, 8:01pm

Fixed:
https://jsfiddle.net/pw8z4aoc/1/


(function manageCurtain() {
    "use strict";

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

    function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    //hide(cover);
    const curtain = document.querySelector(".inner");
    curtain.classList.add("slide");
  }

    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    let player = null;

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100); // percent
    }
    let hasShuffled = false;

    function onPlayerStateChange(event) {
        player = event.target;
        const shufflePlaylist = true;

        if (!hasShuffled) {
            player.setShuffle(shufflePlaylist);
            player.playVideoAt(0);
            hasShuffled = true;
        }
    }

    function addPlayer(video) {

        const playlist = "M7lc1UVf-VE";
        const config = {
            height: 393,
            host: "https://www.youtube-nocookie.com",
            width: 699
        };
        config.playerVars = {
            autoplay: 0,
            cc_load_policy: 0,
            controls: 1,
            disablekb: 1,
            fs: 0,
            iv_load_policy: 3,
            loop: 1,
            playlist,
            rel: 0
        };
        config.events = {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        };
        player = new YT.Player(video, config);

    }

    function play() {
        player.playVideo();
    }
    return {
        addPlayer,
        play
    };
}());

function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".jacketwrap");

    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

(function iife() {
    "use strict";

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

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.parentElement;
        show(wrapper);
        videoPlayer.play();
    }

    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
}());

Paul_Wilkins · July 29, 2021, 10:40pm

Solving that issue brings us closer to the standard module structure of JavaScript code.

Assigning the parenthesised function literal to a variable name, lets us call the code at some later stage.

const manageCurtain = (function makeManageCurtain() {
    ...
}());

That kind of code structure becomes really useful when you have an init function with the code.

We don’t currently have an init function with that code, but some of the code runs automatically when the code is run. That really should be put into an init function instead.

  function init() {
      const cover = document.querySelector(".jacketwrap");
      cover.addEventListener("click", coverClickHandler);
  }

That way, we can return an object from makeManageCover that references the init function, letting us properly initialize manageCover.

const manageCurtain = (function makeManageCurtain() {
    return {
        init
    };
}());
...
manageCurtain.init();

That way instead of the manageCurtain function automatically initializing, it does so under our control when we want it to.

With the videoPlayer code, the onYouTubeIframeAPIReady function really should be a part of the init code instead.

We can move the onYouTubeIframeAPIReady function inside of the videoPlayer function, and add it to the window from an init function.

const videoPlayer = (function makeVideoPlayer() {
  ...
  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".jacketwrap");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
  }
  function init() {
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

That way, we can return a reference to the init function, and properly initialize the code when we are ready to do so.

  return {
    addPlayer,
    play,
    init
  };
}());
videoPlayer.init();

Another benefit of using these init methods is that init statements can all be moved down to the end of the code, below all of the functions.

We can do similar with the code that initializes the cover:

const initCover = (function iife() {
  ...
  function init() {
    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
  }
  return {
    init
  };
}());

Letting us do all of the initialization at the bottom of the code, where it belongs.

manageCurtain.init();
videoPlayer.init();
initCover.init();

asasass · July 30, 2021, 1:35am

I noticed there was an error in the code I thought was fixed.
I saw an error in jslint.

I fixed it here, now no errors in jslint.
https://jsfiddle.net/rwcgktxy/1/

(function manageCurtain() {
    "use strict";

    function coverClickHandler() {
        const curtain = document.querySelector(".inner");
        curtain.classList.add("slide");
    }

    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    let player = null;

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100); // percent
    }
    let hasShuffled = false;

    function onPlayerStateChange(event) {
        player = event.target;
        const shufflePlaylist = true;

        if (!hasShuffled) {
            player.setShuffle(shufflePlaylist);
            player.playVideoAt(0);
            hasShuffled = true;
        }
    }

    function addPlayer(video) {

        const playlist = "M7lc1UVf-VE";
        const config = {
            height: 393,
            host: "https://www.youtube-nocookie.com",
            width: 699
        };
        config.playerVars = {
            autoplay: 0,
            cc_load_policy: 0,
            controls: 1,
            disablekb: 1,
            fs: 0,
            iv_load_policy: 3,
            loop: 1,
            playlist,
            rel: 0
        };
        config.events = {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        };
        player = new YT.Player(video, config);

    }

    function play() {
        player.playVideo();
    }
    return {
        addPlayer,
        play
    };
}());

function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".jacketwrap");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

(function iife() {
    "use strict";

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

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.parentElement;
        show(wrapper);
        videoPlayer.play();
    }

    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
}());

Paul_Wilkins · July 30, 2021, 2:19am

Are you sure? I still see a JSLint error with that code.

asasass · July 30, 2021, 2:23am

jslint says 0 errors
https://jsfiddle.net/rwcgktxy/1/


(function manageCurtain() {
    "use strict";

    function coverClickHandler() {
        const curtain = document.querySelector(".inner");
        curtain.classList.add("slide");
    }

    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    let player = null;

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100); // percent
    }
    let hasShuffled = false;

    function onPlayerStateChange(event) {
        player = event.target;
        const shufflePlaylist = true;

        if (!hasShuffled) {
            player.setShuffle(shufflePlaylist);
            player.playVideoAt(0);
            hasShuffled = true;
        }
    }

    function addPlayer(video) {

        const playlist = "M7lc1UVf-VE";
        const config = {
            height: 393,
            host: "https://www.youtube-nocookie.com",
            width: 699
        };
        config.playerVars = {
            autoplay: 0,
            cc_load_policy: 0,
            controls: 1,
            disablekb: 1,
            fs: 0,
            iv_load_policy: 3,
            loop: 1,
            playlist,
            rel: 0
        };
        config.events = {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        };
        player = new YT.Player(video, config);

    }

    function play() {
        player.playVideo();
    }
    return {
        addPlayer,
        play
    };
}());

function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".jacketwrap");

    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer);
}

(function iife() {
    "use strict";

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

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.parentElement;
        show(wrapper);
        videoPlayer.play();
    }

    const cover = document.querySelector(".jacketwrap");
    cover.addEventListener("click", coverClickHandler);
}());

Paul_Wilkins · July 30, 2021, 4:52am

How can that be? At jslint.com when I select Brower for the environment, it reports when I press the JSLine button that the following problem exists:

1. Undeclared 'YT'.
        player = new YT.Player(video, config);

Paul_Wilkins · July 30, 2021, 6:04am

Ahh I see. You have manually added the global variable YT to the JSLint page before running the linter.

On the instructions page there are details about using the global directive.

That is where you use the following single comment, to give information both to programmers and the linter about global variables that your code expects to be available.

/*global YT */
(function manageCurtain() {

Actually hang on, the same global directives page recommends for self-loading code to just use a var instead.

var YT; // for the self-loading youtube iframe api
(function manageCurtain() {

asasass · July 30, 2021, 6:50am

Aren’t you supposed to add YT manually to jslint?

Was I doing it wrong?

I should be doing this instead?

/*global YT */
(function manageCurtain() {

Paul_Wilkins · July 30, 2021, 8:00am

Yes you can add YT to the linter every time you run up the page, but the comment line there is how you can include that information for the benefit of the linter.

Another important aspect is that it’s for the benefit of any programmer that looks at the code too. It helps to give them information that they didn’t have before, about what’s happening with that global variable that’s used by the code.

system · October 29, 2021, 3:01pm

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

Topic		Replies	Views
Why is playVideo() not in the code? JavaScript	119	9866	November 18, 2021
Div class is causing “Script error” JavaScript	14	1648	February 1, 2022
YouTube video not showing JavaScript	18	1546	November 8, 2021
Changes to cope with separating HTML players and covers JavaScript	160	12759	March 14, 2022
Null is null or not an object JavaScript	5	1817	October 6, 2011

I'm receiving a "script error"

Related topics