Refresh Page with JavaScript OnClick

Question

Within my pen, I'd like to refresh my page after each click of a door. Not sure where I should drop the window.location.reload();

Here's the pen

https://codepen.io/tacodestroyer/pen/bROpeQ

function openDoor(field) {
        var y = $(field).find(".thumb");
        var x = y.attr("class");
        if (y.hasClass("thumbOpened")) {
            y.removeClass("thumbOpened");
        }
        else {
            $(".thumb").removeClass("thumbOpened");
            y.addClass("thumbOpened");
        }
    }

Thanks!

Answer 1

If you're wanting to put random images behind the door, the easiest way would be to create a series of CSS classes for divs that have background images then keep those classnames within an array in your JS. Then when you click on a door, you randomly choose one of the items in that array and apply that class the way you're applying the "open door" effect.

Answer 2

I suppose you want the opening-door animation to complete before reloading the page. You could use the transitionend event for that:

function openDoor(field) {
    var y = $(field).find(".thumb");
    var x = y.attr("class");
    if (y.hasClass("thumbOpened")) {
    // NB: This might never happen given that you reload the page once you open a door
        y.removeClass("thumbOpened");
    }
    else {
        $(".thumb").removeClass("thumbOpened");
        y.addClass("thumbOpened");
        // Wait for the animation to end:
        $(".thumb").on("transitionend", function() {
            // ... and then reload, or do whatever else you want to happen next
            window.location.reload();
        });
    }
}