文本顯示然後在頁面重新加載時消失; 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

回答

相關問題