CODEWITHSUNDEEP
javascript
oksimone
oksimone

Reputation: 11

location.href refreshes instead of redirecting

I'm making a javascript game and once the user finished the game, the user will enter their initials and hit submit. Once they hit submit, it'll redirect them to a new page (end.html). I'm not sure if I've set up my click event incorrectly or I'm using the wrong location.href. But, when I hit the submit button, it brings the user back to the start screen(index.html), instead of the end (highscore) page.

The script tag is located on the bottom of the HTML pages, tags are correctly named. I tried the DOMContentLoaded function and that didn't seem to work. If I need to provide more of my code, please let me know.

here's the js snippet


submitScore.addEventListener("click", function () {
  var initials = document.getElementById("initials").value;
  // calling highscore page function
  endPage(initials, time);
});


function endPage(inits, scores) {
  var userData = {
    inits: inits,
    scores: scores
  };
  highscores.push(userData);
  
  localStorage.setItem("userData", JSON.stringify(highscores));
  location.href = "end.html"
}

Upvotes: 1

Views: 59

Answers (1)

c00kie
c00kie

Reputation: 306

I personally have never used location.assign - have you tried location.replace()?

submitScore.addEventListener("click", function () {
  var initials = document.getElementById("initials").value;
  // calling highscore page function
  endPage(initials, time);
});


function endPage(inits, scores) {
  var userData = {
    inits: inits,
    scores: scores
  };
  highscores.push(userData);
  
  localStorage.setItem("userData", JSON.stringify(highscores));
  location.replace(`${location.origin}/end.html`); 
  // get base url and append 'end.html'
}

EDIT [for others confused]: Actual bug was that the button was being submitted - bravo epascarello for this code:

submitScore.addEventListener("click", function (evt) { 
    evt.preventDefault(); // prevent default behaviour of event

Upvotes: 1

Related Questions