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

您可以清除回叫中的显示或写一个闭包。

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

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

此外，使用像放大的库来进行本地存储，处理跨浏览器的细微差别会更容易

Answer 2

您可以使用ajax查看此链接并应用

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

Ajax初学者链接：http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=10

Answer 3

我希望我早点见到它。

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

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

3 个答案: