Question

我使用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>

如何让文字显示而不会在页面刷新后消失？

PS：我对javascript很新。

Answer 1

这是因为type="submit" ...尝试<input type="button" ... />而不是。

Answer 2

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

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

它就像这个localstorage.setItem来保存值，localstorage.getItem来访问保存的值并将其显示在你的页面上。

希望能回答你的问题！

Answer 3

我相信本地存储可以帮助解决这个问题。我已经为您实施了解决方案。本地存储允许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>

Answer 4

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

Answer 5

尝试更改display：none以显示：脚本中的阻止。

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

}

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

5 个答案: