Update web page content using JavaScript onClick

I'm trying to figure out how to refresh my page every time a door is clicked. Can anyone help me with where I should add window.location.reload(); in my code?

Here's the link to my 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");
        }
    }

Any suggestions would be greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

To add surprise images behind each door, consider setting up a selection of CSS classes for divs containing background images and storing these class names in an array within your JavaScript code. Then, upon clicking a door, you can randomly select one item from the array and assign it to the element to achieve the desired "open door" visual effect.

Answer №2

If you're looking to ensure the opening-door animation finishes before refreshing the page, one way to achieve this is by utilizing the transitionend event:

function openDoor(door) {
    var doorThumb = $(door).find(".thumb");
    var currentClass = doorThumb.attr("class");
    if (doorThumb.hasClass("thumbOpened")) {
        // Note: This scenario may not occur as the page reloads after a door is opened
        doorThumb.removeClass("thumbOpened");
    }
    else {
        $(".thumb").removeClass("thumbOpened");
        doorThumb.addClass("thumbOpened");
        // Wait for the animation to complete:
        $(".thumb").on("transitionend", function() {
            // Execute code once animation ends, like reloading the page
            window.location.reload();
        });
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing image backgrounds for hyperlinks in the Android browser

Encountering a minor issue with some <a> tags that have images as background, and the text inside the tags is indented using CSS. However, on the Android browser, part of the string used in HTML appears to cover the background image within the area o ...

htmlcssandroid-browser

A guide on shading specific faces based on their normal vectors' alignment with the camera's view

https://i.sstatic.net/FG4hp.png I'm currently working on a shader that requires darkening the faces with normals perpendicular to the camera (dot product is 0). How can I calculate this dot product and make sure it works correctly? uniform float tim ...

javascriptthree.jsglslwebgl

Reorder the Polymer dom-repeat element following a modification in the child component's value

My Polymer dom-repeat list is working fine on the initial value sorting for the children. However, when I update a value within a child element, the sort order of the list does not reflect the changes. What is the best way to achieve this? <body> ...

javascriptsortingpolymerdom-repeat

Issue with Webkit for inline display of elements using jQuery following their concealment

Check out my website at: When you type in the text box, jQuery filters the results by hiding and showing them. Everything works smoothly on Firefox, but Chrome and Safari seem to have a strange bug. Even though the elements are displayed inline when inspe ...

jquerycsswebkitinline

What is preventing me from accessing session data using nuxtServerInit?

When attempting to retrieve sessions, I encounter an issue. Is everything set up correctly in the following main files: server, config? store/index.js export const actions = { nuxtServerInit ({ commit }, { req }) { console.log(req); } The console log ...

javascriptvue.jsvuexnuxt.js

Prevent the routing on page reload in AngularJS

My route provider setup looks like this: app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix(''); $routeProvider .when('/', { templateUrl: 'login.html', controller: 'loginCtrl&a ...

htmlangularjsangular-routingroute-provider

Is it possible to establish a limit on a field's value in MongoDB?

Just a quick query - I'm curious if there's a feature in mongodb that allows for fields to have a set maximum value. For instance, let's say the field "cards" is restricted to a maximum value of 100. If an increment would exceed this limit, ...

javascriptmongodb

Having trouble with passing parameters to my ASP.Net Core controller via AJAX and JQuery

I'm looking for some assistance with a datagrid and download button setup on my UI. The goal is to pass the selected row's ID as a parameter to my controller's Download method for further processing. Despite my efforts with Ajax/JQuery, I s ...

jqueryajaxasp.net-mvcasp.net-coredevexpress

Displaying identical information in a bootstrap dropdown menu

I am working on implementing a navigation bar with Bootstrap dropdown functionality. Each button in the navbar has the same content displayed in the dropdown menu, such as the "Exercises" button showing assignments and the "Assignments" button also displ ...

htmlcssbootstrap-4

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...

javascripthtmlcss

The call to Contentful's getAsset function resulted in an undefined value being

I am facing a challenge while trying to fetch an asset, specifically an image, from Contentful and display it in my Angular application. Despite seeing the images in the Network log, I keep encountering an issue where the console.log outputs undefined. Any ...

javascriptangulartypescriptcontentful

Tips for using jest toHaveBeenCalled with multiple instances

Currently, I am in the process of writing a test case for one of my functions. This function calls another function from a library, and I am attempting to mock this function (saveCall). Below is a snippet of the sample code in question: import { Call } fro ...

javascripttypescriptunit-testingjestjsmocking

Is there a way to verify if the email entered into the input field is included in the list provided below?

Whenever an email is entered into the text box, a validation message should appear next to the input field. The inputted email should be checked against the list of emails below, and if it exists, an error message needs to be displayed. I need assistance w ...

javascriptreactjsnext.js

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

javascriptjqueryhtmlcss

Tips for building nested columns within React Bootstrap Table

I have been working with react bootstrap table, you can find more information here You can check out the code in action by clicking here My goal was to create a table that resembles the one shown below: https://i.sstatic.net/jsZKe.png Here is an example ...

htmlcssreactjsbootstrap-5react-bootstrap

Tips on positioning the down arrow of an accordion-button to the left

I need to adjust the placement of the down arrow on an accordion button for my Arabic language website. Here is the current code snippet: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

htmlcssbootstrap-5

Generate a new document and input information using the ionic framework

I'm currently working on an application for mapping purposes. I have generated KML and JSON strings that need to be stored in files within the phone's memory. To achieve this, I implemented the following code: var fileObject; document.addEve ...

jqueryangularjscordovaionic-framework

Using Ramda to transform an array of key-value pairs into an object

Utilizing Ramda to organize a normalized model object by key involves converting it to key|value pairs (similar to Object.entries) and sorting by the first value using R.head (which represents the key when in pairs) The goal is to transform the resulting ...

javascriptramda.js

Utilize Material icons in CSS for a list in Angular 9

My task involves altering the HTML provided by a content management system for one of our applications. Specifically, I need to replace all "ul"s with <mat-icon>check_circle_outline</mat-icon> instead of the default "." The challenge lies in t ...

cssangularangular-material

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml