在具有不同结果的两个不同页面上调用相同的函数将 element.style.display 更改为 "block"

Question

我正在开发一个简单的 CRUD-web-app，包含 3 个页面，一个 landing/index 页面，1 个页面用于查看显示保存的数据，1 个页面用于进行更改并将这些更改保存在 indexeddb 中. 在其中两个页面上，我调用了一个简单的 javascript 函数来将 .style.display 从“none”更改为“block”以便显示模态。由于某种原因，它只适用于一页。在另一页（HTML 下面显示的代码）模式仅显示一瞬间，然后导航到着陆页。

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

包含此代码的 javascript 文件在两个 HTML 文件中都有链接。下面是相应的 HTML 代码。该函数在第 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>

当我打开 chrome devtools 并从控制台调用 modalOpen() 函数时，模式会按预期显示。使用 chrome、edge 或构建为 android 移动设备的 apache cordova 应用程序时会发生此行为。缓存在两个浏览器中多次清除的已保存数据。为什么这（没有）发生？

Answer 1

由于历史原因，默认情况下，<button> 标签在 <form> 中时充当提交按钮。您可以执行以下两项操作之一：

如果您正在使用某种 ajax 机制，您可能根本不需要 <form>；
您可以明确制作按钮 <button type=button> 以禁用该提交行为

在具有不同结果的两个不同页面上调用相同的函数将 element.style.display 更改为 "block"

Calling same function to change element.style.display to "block" on two different pages with different outcome

html

javascript

css

cordova