（Javascript）刷新页面后元素消失答案

【问题标题】：(Javascript) Element disappears after refreshing the page（Javascript）刷新页面后元素消失
【发布时间】：2021-07-03 07:55:29
【问题描述】：

我创建了一个函数，当单击该按钮时，它将使“barProgress25”出现并从屏幕上隐藏“barProgress0”。

但是发生的情况是，当我单击按钮时，它会执行该功能，但在刷新页面后，因为它发送提交“barProgress25”和“barProgress0”返回到它们的原始 css。

我该如何解决这个问题？

HTML 代码按钮。

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

HTML 代码栏。

<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 exibeBarras(visivel) {    

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

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

【问题讨论】：

如果您希望信息在页面重新加载时保持不变，那么您需要将其保持在某个地方。在这种情况下，本地存储可能是一个合理的解决方案。您可以将数据写入本地存储，并在页面加载时检查是否有数据写入和读取。
@David 你能给我举个例子来说明我如何编写代码吗？
...或者只是阻止页面重新加载？
@JeremyThille 我该怎么做？
stackoverflow.com/questions/19454310/…

标签： javascript html css refresh

【解决方案1】：

而不是在按钮本身中使用 onClick。您可以在您的 javascript 代码中附加一个单击事件侦听器，并防止在提交时默认重新加载操作，如下所示。

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

或者，如果您希望刷新但又不想丢失数据，那么您必须将其保存在本地存储之类的地方，这样一旦页面刷新，您就可以从那里访问按钮的状态，无论它是否被点击，并且相应地更新您的 CSS。

【讨论】：