LocalStorage cannot set properly

Question

I am trying to update points when the user is at location 1 and 2 and set them in my local storage. I have created a function object to store the points. when I console.log(userStats) at my location 1, the points are properly updated. However, when I console.log(userStats) at location 2 after getting userStats to check, it goes back to zero when it should be 15. Here is my code...

$('.submit1').click(function(){
    if(document.getElementById("username").checkValidity() && document.getElementById("username").value !=""){
   


    //Get form values
    let username = document.getElementById("username").value;
    let apoints = 0;
    let aitemsCollected = 0;
    
    
    console.log(username)
    
    

    
      let newUser = new User (username, apoints, aitemsCollected);
      console.log(newUser);
      //create our student and store to localstorage
      
      localStorage.setItem("userStats", JSON.stringify(newUser));

      showUserStats();
    }
    });
  

    function showUserStats() {
        
        if (localStorage.getItem("userStats") !== null) {
          userStats = JSON.parse(localStorage.getItem("userStats"));

              console.log(userStats);
          }
          
        };
        
    function User(username,apoints,aitemsCollected) {
      this.id = Date.now();
      this.name = username;
      this.points = apoints;
      this.itemsCollected = aitemsCollected;
         
    };


//checking whether passcode is correct 
    var location = 1; //check which location user is at
    $(".passcodesubmit").click(function(){
      var checkPasscode = ""+document.getElementById("passcode").value;
      console.log(checkPasscode);
      console.log(location);
       
    
      let userStats = JSON.parse(localStorage.getItem("userStats"));
     
      if (location == 1 && checkPasscode!="" && checkPasscode!= null && checkPasscode == "14Jk091H"){
        if (localStorage.getItem("userStats") !== null) {

          let userStats = JSON.parse(localStorage.getItem("userStats"));
          let accumulatedPoints = userStats.points + 15;
          userStats.points = accumulatedPoints ;

          let addItem = userStats.itemsCollected+1 ;
          userStats.itemsCollected = addItem;

          localStorage.setItem("userStats.points", JSON.stringify(accumulatedPoints));
          localStorage.setItem("userStats.itemsCollected", JSON.stringify(addItem));
          console.log(userStats.points);

          ++location;
         
          console.log(userStats);
          $(".bg").css("display","block");
          $(".cross1").css("display","block");
          
        }
      } else if(location == 2 && checkPasscode!="" && checkPasscode!= null && checkPasscode == "e4HP087p"){
        if (localStorage.getItem("userStats") !== null) {

          let userStats = JSON.parse(localStorage.getItem("userStats"));
          console.log(userStats);
          console.log(userStats.points);
          let accumulatedPoints = userStats.points + 15;
          userStats.points = accumulatedPoints ;
          localStorage.setItem("userStats.points", JSON.stringify(accumulatedPoints));

          let addItem = userStats.itemsCollected + 1 ;
          userStats.itemsCollected = addItem;
          localStorage.setItem("userStats.itemsCollected", JSON.stringify(addItem));
           
          console.log(userStats.points);

          ++location;
          console.log(userStats);
          collectItem3();
        } 
});

Answer 1

If the function is triggered by a user clicking a form submit button, this causes a default activity of re-loading the page (and so a new variable location will be initialised at the globally-scoped var location = 1;)

(unless you have not shown existing code where location is written to and retrieved from localStorage).

I would write location to localStorage each time its value changes and retrieve it from localStorage before each conditional referencing it. Otherwise, the global scope will be read for its value.

Alternatively, if using a form, open it like this: <form onsubmit="return false">.

If you have a button like this: <input type="submit"> change it to a regular button: <button type='button'>submit</button>

also, you could use an override in your event listener like this: event.preventDefault() (event being whatever placeholder you use for the event listener call-back function argument).