Upon refreshing the page in Javascript, the element mysteriously vanishes without a trace

Question

Upon refreshing the page in Javascript, the element mysteriously vanishes without a trace

After implementing a function that should display "barProgress25" and hide "barProgress0" when a button is clicked, I encountered an issue. Upon clicking the button, the function works as intended but upon page refresh, "barProgress25" and "barProgress0" revert back to their original CSS states.

How can I fix this problem?

Button HTML code.

<button type="submit"
            id="btnSalvar"
            onclick="desabilitaBtn(this.id); exibeBarras();"
            class="btnSalvarGreen btnInqBar"
            form="FormInquerito"
            style="margin-left: 1em;">
        SAVE
    </button>

Bar HTML code.

<div id="barProgress0" class="progress barProgress">
   <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="barProgress25" class="progress barProgress">
   <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Function code.

function exibeBarras(visivel) {    

    if (visivel == undefined) {
        visivel = true;
    }

    if (visivel) {
        document.getElementById("barProgress25").style.display = "block";
        document.getElementById("barProgress0").style.display = "none";            
    }      
}

javascript html css refresh

Answer 1

Answer №1

One way to enhance the button function is by adding a click event listener in the javascript code instead of using onClick directly in the button element. This allows you to prevent the default reload action upon submission:

document.getElementById("btnSalvar").addEventListener("click", function(event){
  event.preventDefault();
  //Insert your code here
});

If you prefer the page to refresh but want to retain data, consider storing it in local storage. This way, even after a refresh, you can access the button's state and update the css accordingly.

Answer 2

One way to enhance the button function is by adding a click event listener in the javascript code instead of using onClick directly in the button element. This allows you to prevent the default reload action upon submission:

document.getElementById("btnSalvar").addEventListener("click", function(event){
  event.preventDefault();
  //Insert your code here
});

If you prefer the page to refresh but want to retain data, consider storing it in local storage. This way, even after a refresh, you can access the button's state and update the css accordingly.

Upon refreshing the page in Javascript, the element mysteriously vanishes without a trace

Answer №1

Similar questions

Add HTML and JavaScript code dynamically with JavaScript

Issue: Animation not triggered on exit by React-transition-group Transition

Display error messages in Vue.js

Prevent the caching of the cache manifest file in IIS to avoid issues with browser caching

Tips on entering a text field that automatically fills in using Python Selenium

Issue with content overlapping when hamburger icon is tapped on mobile device

Having trouble with Vue.js not returning HTML elements from methods properly?

"Is it possible to keep an eye on two different events and take action once they both

Setting a unique identifier for a newly created element in JavaScript and the DOM

Steps for changing the direction of a dropdown menu to the left instead of the right

The row and col classes will only expand to the full width if they are used within form or p elements

AJAX seems to be struggling to recognize JSON data as JSON format

The intricate procedure behind applying a blur effect using CSS3 filters

What could be the reason for the sudden failure of my jQuery + AJAX functionality?

choose a CSS class within a div element's class name

Load Vue 3 components dynamically using a string-based approach

The padding of the iFrame does not match the padding of the source

Is there a way to retrieve all the items from the array?

Exploring the nuances of useEffect() functionality and the impact of extra re-renders

Encountering an NPM error while attempting to initiate a new React application