(Javascript) Element disappears after refreshing the page

Question

I created a function so that when the button is clicked it will make "barProgress25" appear and "barProgress0" hide from the screen.

However what happens is that when I click on the button it performs the function but after refreshing the page because it sends a submit "barProgress25" and "barProgress0" return to having their original css.

How do I solve this?

HTML code button.

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

HTML code bar.

<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>

Code function.

function exibeBarras(visivel) {    

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

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

If you want information to persist across page reloads then you'll need to persist it somewhere. Local storage is likely a reasonable solution in this case. You can write data to local storage and when the page loads check if there's data written and read it. — David, Apr 07 '21 at 13:33
@David Could you show me an example of how I can do it code? — Mizrain Phelipe Sá, Apr 07 '21 at 13:35
https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit — Jeremy Thille, Apr 07 '21 at 13:40
If local storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage, https://www.w3schools.com/jsref/prop_win_localstorage.asp, but maybe session storage is the better way: https://www.tutorialrepublic.com/html-tutorial/html5-web-storage.php — Brebber, Apr 07 '21 at 13:41

score 0 · Answer 1 · answered Apr 07 '21 at 13:43

Instead of using onClick in the button itself. You can attach a click event listener in your javascript code and prevent the default reload action on submitting as shown below.

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

Or if you want the refresh to happen but don't want to lose data then you have to persist it somewhere like local storage so once the page refreshes you can access the state of your button from there whether it's clicked or not and update your css accordingly.

(Javascript) Element disappears after refreshing the page

1 Answers1