如何在不刷新页面的情况下更新我的显示框？答案

【问题标题】：How do I update my display box without having to refresh the page?如何在不刷新页面的情况下更新我的显示框？
【发布时间】：2012-09-13 04:15:35
【问题描述】：

我有一个脚本可以计算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。

【问题讨论】：

标签： javascript greasemonkey partial-page-refresh

【解决方案1】：

您可以在回调中清除显示或编写闭包。

一个非常简单的方法是在检查本地存储是否清除时将显示区域的值设置为

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");
}

另外，使用像 amplify 这样的库进行本地存储，处理跨浏览器的细微差别会更容易

【讨论】：

你不需要现在就不需要。如果你打算用 javascript 开发，那么你应该;)

【解决方案2】：

我希望我能早点看到它。

最简单的方法是更改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");
}

【讨论】：