Pressing the button will reveal the contents of .container3

Question

Pressing the button will reveal the contents of .container3

If you require any additional information, please feel free to reach out.

I find it quite puzzling why I am struggling to solve this.

While I can successfully navigate from .container1 to .container2 using the first exit button, I'm facing difficulties in moving from .container2 to .container3 with the second exit button.

To view the code example provided, scroll down to locate the exit button.

The issue lies in the fact that clicking on the second exit button should direct me to .container3.

The appearance of the second exit button follows after clicking on the first exit button.

Reproducible Code Snippet: https://jsfiddle.net/reuqancf/

Complete Code I'm working on: https://jsfiddle.net/pzn98Lw6/

Take a look at this demo code: https://jsfiddle.net/h5vkt3br/

You can observe its functionality there.

Analyze the demo code closely to understand how it's structured.

In the code I'm currently working on, clicking on the second exit button is expected to lead me to .container3, but this is not happening.

After clicking the exit button for the first time, it triggers the "initial-fade" animation.

...

javascript html css button

Answer 1

Answer №1

To address the issues at hand, there are various approaches that can be taken. Let me outline the problems and provide one solution to achieve the desired outcome.

Upon reviewing your css code, it appears that the class .bg2 is intended to display the div with the class .container3.

Your current css:

    .bg2 .container3 {
      display: flex;
    }

To successfully hide the divs with classes .container1 and .container2 when the .bg2 class is applied, you need to update your css as follows:

    .bg2 .container1, .bg2 .container2 {
      display: none;
    }

JS Implementation:

The JavaScript function that adds the .bg1 class runs only once during initialization, which prevents the addition of the .bg2 class. To resolve this issue, consider moving the call to resetPage() from the animationEndHandler() function to the exitClickHandler() function. This way, it will be executed each time the exit button is clicked.

    function animationEndHandler(evt) {
      const animationName = evt.animationName;
      console.log(animationName);
      if (animationName === "initial-fade") {
        body.classList.remove("initial-fade");
        // move this to exitClickHandler()
        // resetPage();
      }
    }
 
    function exitClickHandler() {
      body.classList.add('initial-fade');
      resetPage();
    }

Another adjustment needs to be made in the resetBackground() function. Currently, it only adds the bg1 class to the body tag. By introducing a counter variable, we can ensure that the appropriate class (bg2) is added in sequence according to your styling requirements.

    let counter = 1;
    function resetBackground(backgroundSelector) {
      const background = document.querySelector(backgroundSelector);
      background.classList.add("bg" + counter);
      counter++;
    }

There are multiple strategies available for managing the visibility of video containers. I trust this guidance proves beneficial to you.

For a demonstration, you can access a functional jsfiddle via this link: https://jsfiddle.net/rpb138/xvr2uzse/3/

Answer 2

To address the issues at hand, there are various approaches that can be taken. Let me outline the problems and provide one solution to achieve the desired outcome.

Upon reviewing your css code, it appears that the class .bg2 is intended to display the div with the class .container3.

Your current css:

    .bg2 .container3 {
      display: flex;
    }

To successfully hide the divs with classes .container1 and .container2 when the .bg2 class is applied, you need to update your css as follows:

    .bg2 .container1, .bg2 .container2 {
      display: none;
    }

JS Implementation:

The JavaScript function that adds the .bg1 class runs only once during initialization, which prevents the addition of the .bg2 class. To resolve this issue, consider moving the call to resetPage() from the animationEndHandler() function to the exitClickHandler() function. This way, it will be executed each time the exit button is clicked.

    function animationEndHandler(evt) {
      const animationName = evt.animationName;
      console.log(animationName);
      if (animationName === "initial-fade") {
        body.classList.remove("initial-fade");
        // move this to exitClickHandler()
        // resetPage();
      }
    }
 
    function exitClickHandler() {
      body.classList.add('initial-fade');
      resetPage();
    }

Another adjustment needs to be made in the resetBackground() function. Currently, it only adds the bg1 class to the body tag. By introducing a counter variable, we can ensure that the appropriate class (bg2) is added in sequence according to your styling requirements.

    let counter = 1;
    function resetBackground(backgroundSelector) {
      const background = document.querySelector(backgroundSelector);
      background.classList.add("bg" + counter);
      counter++;
    }

There are multiple strategies available for managing the visibility of video containers. I trust this guidance proves beneficial to you.

For a demonstration, you can access a functional jsfiddle via this link: https://jsfiddle.net/rpb138/xvr2uzse/3/

Pressing the button will reveal the contents of .container3

Answer №1

Similar questions

Creating a scheduled redirect button using JavaScript and another button to cancel it

Synchronize numerous devices seamlessly using React Native without an internet connection

The hamburger menu for mobile devices is not functioning properly on the website's mobile version, however it operates correctly when the screen is resized

I'm experiencing difficulties with app.use() not functioning in my specific case, even though the paths are identical

Unable to display results in the control: select2 version 4 ajax data is not showing up

The URL http://localhost:3001/users/signup returned a 404 error, indicating that the page was

Here are some tips for retrieving information from a JavaScript object

Adding JSON content to a form for editing functionality within an Angular 8 CRUD application

Validating the similarity of classes with JQuery

Is there a way to customize the hamburger icon for the navigation bar in Bootstrap 4?

Determine the number of inputs within a div and increment each one by +1 using jQuery

Tips for customizing the appearance of a checkbox made with AngularJS

Guidance on assigning a value retrieved from an external API to an input field with the combined use of formik and MUI

What is the best way to customize the MenuProps of Material UI Select component using createTheme?

Looping through an array using NgFor within an object

Reducing the size of the website does not necessarily mean the body will be at 100% width

Image taking up the full width placed within a container with a set width dimension

Angular default route with parameters

Unable to display a Google map within a webview when viewing a local HTML file

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased