如何更新顯示框而不必刷新頁面？

Question

我有一個腳本，計數unicreatures.com上的步驟，並添加了一個按鈕來清除計數。它的工作原理，但我不滿意的事實，即我的顯示框不更新與新的計數，直到頁面重新加載。在計數被清除而不必重新加載頁面之後，有沒有辦法更新我的盒子的內容？

var clearTotal= confirm("Do you really want to clear your step count?"); 
if (clearTotal== true) { 
    localStorage.steps=0 
    alert("yes"); 
} 
else { 
    alert("no"); 
} 

}, true) 

如果有人能指出我的正確方向，我會很高興。我花了幾個小時尋找答案，但也許我只是使用了錯誤的搜索條件。我不使用JQuery，所以請保留所有信息到JavaScript。

Answer 1

我希望我能看到它更快。

做到這一點，最簡單的方法是改變的box.innerHTML

if (clearTotal== true) { 
    localStorage.steps=0 
    box.innerHTML ='<div><p> ' + 
    "You have taken "+localStorage.steps+" steps total" + 
    '</br><button type="button" button id="clear">Clear total steps...</button></p></div>'; 
    document.body.appendChild(box); 
    alert("yes"); 
} 

Answer 2

您可以使用AJAX看到此鏈接和應用

http://www.tizag.com/ajaxTutorial/ajax-javascript.php

阿賈克斯初學者鏈接：http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=10

Answer 3

值可以清除呼叫顯示屏後或寫關閉。

一個非常簡單的方法是將顯示區域的值設置爲當你檢查，如果本地存儲是明確

var myTextField = document.getElementById('the_display_area_id');  
var clearTotal= confirm("Do you really want to clear your step count?"); 
if (clearTotal== true) { 
    localStorage.steps=0 
    myTextField.value() = ""; 
}else{ 
    alert("no"); 
} 

此外，使用像放大了本地存儲庫，這將是更容易處理跨瀏覽器的細微差別