How do I update my display box without having to refresh the page?

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

Answer 2

You can clear the display in the call back or write a closure.

A very simple approach would be to set the value of display area to when you are checking if the local storage is clear

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

Also, use a library like amplify for local storage, it will be easier handling cross browser nuances