Clicking one element to remove a different element

JavaScript
11

It looks like you’ve been making several changes to the code in https://jsfiddle.net/zb6mkug3/136/ without understanding the impact of those changes.

For example:

    var wrapper = document.querySelector(".lines");
    hideInitialOverlay(wrapper);

The wrapper is the wrapg element, not the one with lines, there is no initial overlay at the lines area, and you’re calling code that’s designed to hide the initial overlay based on the wrapper. without even giving it the wrapper.

That the code even vaguely does something that you want after what you’ve done to it, seems to be a completely coincidental.

There doesn’t seem to be any overlay with what you’ve done now. Instead with what you’re wanting to achieve, there are two different triggers for things to occur. One trigger is when you click on the lines, and the other is when you start playing the video.

With hiding those lines, much of the code can be removed, and replaced with a simple hide function:

    const lines = document.querySelector(".lines");
    function hideLines() {
        lines.classList.add("hide");
    }
    function clickHandler(evt) {
        hideLines();
    }
    lines.addEventListener("click", clickHandler);

The important thing about the above changes is that there is a separate hideLines() function that can be called from multiple places, because we also want the video player to hide those lines too.

We can also add an event handler for when the video changes state.

    function onPlayerStateChange(evt) {
        // possible states values are:
        // -1 (unstarted), 0 (ended), 1 (playing),
        // 2 (paused), 3 (buffering), 5 (video cued).
        var state = evt.data;
        if (state > 0) {
            hideLines();
        }
    }
...
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }

And lastly, we can add a player variable to the top of the code, so that we can access the player when the lines are clicked.

    let player;
    ...
    function clickHandler(evt) {
        ...
        player.playVideo();
    }
    ...
    function onPlayerReady(event) {
        // const player = event.target;
        player = event.target;
        player.setVolume(100); // percent
    }

And the code now seems to behave in the way that is desired.

Clicking on the lines causes them to be hidden and plays the video, and playing the video causes the lines to be hidden.

3 Likes