Calling same function to change element.style.display to "block" on two different pages wi-CodePudding

I am working on a simple CRUD-web-app consisting of 3 pages, a landing/index page, 1 page to see display the saved data and 1 page to make changes and save these changes in an indexeddb. On two of these pages i call a simple javascript-function to change .style.display from "none" to "block" in order to display a modal. For some reason it only works on one page. On the other page (HTML code displayed below) the modal is displayed for only a split second before one gets navigated to the landing page.

function modalOpen(){
let modal = document.getElementById("aModal");
modal.style.display = "block";}

The javascript file containing this code is linked in both HTML files. Following below is the corresponding HTML Code. The function gets called in line 5.

 <main>
  <form>
    ....
   <button id="bSubmitExercise" onclick="edit('all')">Änderungen speichern</button>
   <button id="bOpenDeleteModal" onclick="modalOpen()">Übung löschen</button>
   <button id="bBackToIndex" onclick="location.href='detailsExercise.html'">Zurück zur Übersicht</button>
  </form>
</main>
<article id="aModal" >
    <section >
        <h5 id="hExercisesName"></h5>
        <div >
            <button id="bModalConfirmDelete"  onclick="deleteExercise()">Löschen</button>
            <button id="bModalClose"  onclick="modalClose()">Fenster schließen</button> 
        </div>
    </section>
</article>

When i open the chrome devtools and call the modalOpen()-function from console, the modal gets displayed as intended. This behavior occurs wether using chrome, edge or when built as apache cordova app for android mobile. Cache an saved data cleared multiple times in both browsers. Why is this (not) happening?

CodePudding user response：

For historical reasons, by default the <button> tag acts as a submit button when it's in a <form>. You can do one of two things:

If you're using some sort of ajax mechanism anyway, you might not need a <form> at all;
You can explicitly make the buttons <button type=button> to disable that submit behavior