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" class="aModal">
    <section class="sModalContent">
        <h5 id="hExercisesName"></h5>
        <div class="dContModalButtons">
            <button id="bModalConfirmDelete" class="bModal" onclick="deleteExercise()">Löschen</button>
            <button id="bModalClose" class="bModal" 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?