Question

I have a script that counts steps on unicreatures.com and added a button to clear the count. It works but I’m not happy with the fact that my display box doesn’t update with the new count until the page is reloaded. Is there a way to update the contents of my box after the count is cleared without having to reload the page?

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

}, true )  

I’ll be happy if anyone can even point me in the right direction. I spent a couple hours searching for an answer, but maybe I’m just using the wrong search terms.

I don’t use JQuery, so please keep all information to JavaScript.

Answer 1

I wish I’d seen it sooner.

The easiest way to do this is to change the value of the 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");
}