文本显示然后在页面重新加载时消失；javascript onclick事件

我使用javascript在点击按钮时显示文本。当我点击按钮时，文本出现，然后在重新加载页面后消失

这是单击按钮后包含文本的段落

<p class="lead" id="class"><strong style="color: red; font-size: 15px; display: none;"></strong></p>

这是我的按钮：

<button type="submit" class="btn btn-primary" onclick="myFunction()">Search</button>

搜索

这是我的剧本

<script>
        function myFunction() {
            document.getElementById("class").innerHTML = "Class current balance total";

        }
</script>

函数myFunction（）{
document.getElementById（“类”）.innerHTML=“类当前余额合计”；
}

如何使文本在页面刷新后显示而不消失

---

PS：我对javascript非常陌生。

表单标签导致页面重新加载。删除表单标签，它应该可以正常工作。

这是因为

type=“submit”

。。。请尝试将脚本中的display:none更改为display:block

function myFunction() {
    document.getElementById("class").innerHTML = "Class current balance total";
    document.getElementById("class").children.style.display = 'block';

---

}

用这种方法是做不到的。JS不是这样工作的。为了使数据恢复到原来的状态，即使在刷新页面之后，您也需要使用Localstorage

Localstorage是JS中的一个概念，当您在事件发生后显示数据时，您将值存储在浏览器的Localstorage中，因此，由于值已经存储在浏览器中，您应该能够检索该值

保存值应该类似于localstorage.setItem，访问保存的值并将其显示在页面上

---

希望这能回答你的问题

我相信本地存储将有助于解决这个问题。我在这里为您实现了一个解决方案。本地存储允许web应用程序在用户浏览器中本地存储。它与饼干不同。我在这里所做的是将文本作为密钥/值对存储到本地存储器中。本地存储使用“getItem”方法检索它。您可以看到此代码的演示

守则：

<script>
  //an immediately invoked function that checks to see if the text is in local storage already
  (function(){
    //if the text is in local storage, set the html
    if (localStorage.currentTotal){
    console.log(localStorage.currentTotal);
    document.getElementById('class').innerHTML = localStorage.getItem("currentTotal");
  }
    })();
  //function that gets called for an onclick event
  function myFunction() {
// Store in local storage
localStorage.setItem("currentTotal", "Class current balance total");
//set the inner html to what is in local storage
document.getElementById("class").innerHTML = localStorage.getItem("currentTotal");

}
</script>

//一种立即调用的函数，用于检查文本是否已在本地存储器中
（功能（）{
//如果文本在本地存储中，请设置html
if（localStorage.currentTotal）{
log（localStorage.currentTotal）；
document.getElementById（'class'）.innerHTML=localStorage.getItem（“currentTotal”）；
}
})();
//为onclick事件调用的函数
函数myFunction（）{
//存储在本地存储器中
setItem（“currentTotal”，“Class current balance total”）；
//将内部html设置为本地存储中的内容
document.getElementById（“class”）.innerHTML=localStorage.getItem（“currentTotal”）；
}

简短回答：你不容易做到这一点。更长的回答。“刷新”的意思就是：它可以一笔勾销。我看你的代码没有问题。我把它放在一个垃圾桶里，似乎没有什么问题。（作为旁注，不要使用

id='class'

。可能很难区分您的

id

与

class

属性的不同）。编辑如果你的意思是你的文字消失后，你重新加载页面，这就是它应该做的。您不希望您的文本停留在周围让其他人看到。请澄清，您不希望文本在刷新后消失？什么

标记？页面将重新加载的唯一原因是如果它试图提交表单。除此之外，您正在按重新加载。