Original state of class name is restored upon change

Question

Original state of class name is restored upon change

I'm currently working on creating a Lightbox-style effect using CSS and Javascript. The idea is to change the classname of an element (OverlayContainer) to toggle between a normal background and a darker overlay. However, I've run into an issue where the state changes briefly upon clicking the submit button, but then immediately reverts back to its original state (OverlayInactive). If anyone has any insights or suggestions on why this might be happening, I would greatly appreciate it.

Below is the CSS code:

.OverlayBoxInactive {
    background-color: rgba(0, 0, 0, 0);

    position: absolute;
    width: 0%;
    height: 0%;

    top: 0px;
    left: 0px;
}

.OverlayBoxActive {
    background-color: rgba(0, 0, 0, 0.85);

    position: absolute;
    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;
}

And here is the corresponding Javascript code:

function ActivateOverlay() {

    var overlayBox = document.getElementById("OverlayContainer");
    var elementClassName = overlayBox.className;

    if (elementClassName == "OverlayBoxInactive") {
        overlayBox.setAttribute("class", "OverlayBoxActive");
        //alert('Overlay Activated');
    } else if (elementClassName == "OverlayBoxActive") {
        overlayBox.setAttribute("class", "OverlayBoxInactive");
        //alert('Overlay Inactivated');
    }

}

Thank you in advance for any assistance,

-Realitiez

EDIT POST: http://jsfiddle.net/bk5e9t0e/

javascript css html

Answer 1

Answer №1

When you use an input type="submit", the form's data is typically sent back to the server and the page reloads, resulting in the removal of your class.

To avoid this page reload, you can prevent the default action by returning false in the onclick handler:

onclick="ActivateOverlay(); return false;"

Answer 2

When you use an input type="submit", the form's data is typically sent back to the server and the page reloads, resulting in the removal of your class.

To avoid this page reload, you can prevent the default action by returning false in the onclick handler:

onclick="ActivateOverlay(); return false;"

Answer 3

Answer №2

The reason your code wasn't working:

You used type=submit for the input, which caused a page refresh effect. It should have been type=button or included return false; in the click handler.
You called the function ActivateOverlay before it was defined.

Check out the solution on jsFiddle below

<script>
    function ActivateOverlay() {
        //alert('Overlay Activated');

        var overlayBox = document.getElementById("OverlayContainer");
        var elementClassName = overlayBox.className;

        if (elementClassName == "OverlayBoxInactive") {
            overlayBox.setAttribute("class", "OverlayBoxActive");
            //alert('Overlay Activated');
        } else if (elementClassName == "OverlayBoxActive") {
            overlayBox.setAttribute("class", "OverlayBoxInactive");
            //alert('Overlay Inactivated');
        }
    }
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
    <form>
        <input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
    </form>
</fieldset>
<script type="text/javascript" src="index.js"></script>

http://jsfiddle.net/4queag8m/

Answer 4

The reason your code wasn't working:

You used type=submit for the input, which caused a page refresh effect. It should have been type=button or included return false; in the click handler.
You called the function ActivateOverlay before it was defined.

Check out the solution on jsFiddle below

<script>
    function ActivateOverlay() {
        //alert('Overlay Activated');

        var overlayBox = document.getElementById("OverlayContainer");
        var elementClassName = overlayBox.className;

        if (elementClassName == "OverlayBoxInactive") {
            overlayBox.setAttribute("class", "OverlayBoxActive");
            //alert('Overlay Activated');
        } else if (elementClassName == "OverlayBoxActive") {
            overlayBox.setAttribute("class", "OverlayBoxInactive");
            //alert('Overlay Inactivated');
        }
    }
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
    <form>
        <input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
    </form>
</fieldset>
<script type="text/javascript" src="index.js"></script>

http://jsfiddle.net/4queag8m/

Answer 5

Answer №3

To avoid the page from reloading, make sure to include a preventDefault() in your function code.

Begin by adding the element to your call:

onclick="ActivateOverlay(this)"

Then, include the prevent parameter in your function like so:

function ActivateOverlay(evt) {
    evt.preventDefault()

    // Your code here
}

Answer 6

To avoid the page from reloading, make sure to include a preventDefault() in your function code.

Begin by adding the element to your call:

onclick="ActivateOverlay(this)"

Then, include the prevent parameter in your function like so:

function ActivateOverlay(evt) {
    evt.preventDefault()

    // Your code here
}

Original state of class name is restored upon change

Answer №1

Answer №2

Answer №3

Similar questions

Encountering the error message "The function $(...).tablesorter is not defined" while using webpack

Import .vue single file component into PHP application

How to extract IDs from a URL in Angular

Using HTML to create interactive table cells

Is there a way for me to view the specifics by hovering over a particular box?

Interactive HTML5 map featuring geo tagged points

Unit testing an Angular service using Jasmine with a JSON object schema in Angular 2/4

Customizing Marker Images in Google Maps JavaScript API

The complexity surrounding various versions of jQuery, the .noConflict method, and the jQuery migrate feature

The function insertAdjacentHTML does not seem to be functioning properly when used with a

Changing font styles using the jMenu jQuery plugin: A step-by-step guide

"Upon requesting three gltf files, the response was found to

How does JavaScript function syntax differ in Next.js and JSX?

When the parent element's CSS property is set to display: none, ng-repeat fails to function

Renew the id_token in the front-end: Angular 4

Sending Parsed Information to Callback for Flexible Use

What is the best way to ensure form submissions in jQuery include non-empty inputs?

Excessive content causing an overflow within the table and extending the length of

Getting form field values with JQuery

Wave your way to unique text creation with Firefox