文本显示然后在页面重新加载时消失; javascript onclick event

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

这是包含点击按钮后的文字段落

<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>

我怎样才能让文本显示后页面刷新后不会消失？

PS：我对JavaScript很陌生。

来源

2017-10-04 Martin

简短的回答：你不能轻易做到这一点。较长的答案[这里]（https://stackoverflow.com/questions/7058634/persisting-dom-changes-after-clicking-a-link-and-then-pressing-the-back-button）。刷新的意思就是：它清洁板岩。 –

我没有看到您的代码有问题。我把它放在Plunker中，似乎没有问题。 https://plnkr.co/edit/v0RKTBjk5QBN5JL5oNPl?p=preview（注意，不要使用'id ='class''。可能很难说你的'id'与'class'属性不同）。 **编辑**如果你的意思是你的文本在你重新加载页面后消失，那就是它应该做的。你不希望你的文字留在其他人看到。 – JustinJmnz

只是为了澄清，你不希望刷新后文本消失？ –

我确实认为本地存储可以解决这个问题。我在这里为你实施了一个解决方案。本地存储允许Web应用程序在本地存储在用户的浏览器中。它不同于cookies。我在这里所做的是将文本作为键/值对存储在本地存储中。本地存储使用“getItem”方法检索它。你可以看到这个代码here

的演示代码：

<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>

来源

2017-10-04 17:42:06

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

来源

2017-10-04 17:12:17 Scriptonomy

什么'

页面重新加载的唯一原因是它试图提交表单。除此之外，你正在按下重新加载。 – Scriptonomy

那是因为type="submit" ...试着用<input type="button" ... />代替。

来源

2017-10-04 17:17:41 assembler

尝试更改显示：无显示：您的脚本中的块。

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

}

来源

2017-10-04 17:19:33

你不能做到这一点与这种方式。这不是JS如何工作。为了使数据恢复到原来的状态，即使在刷新页面之后，您也需要使用Localstorage来完成此操作。

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

它不应该像这样localstorage.setItem保存值和localstorage.getItem访问保存的值并将其显示在您的页面上。

希望能回答你的问题！

来源

2017-10-04 17:21:12

文本显示然后在页面重新加载时消失; javascript onclick event

回答

相关问题