Unable to use javascript variable when I load a new html page

Question

var answers = ['B','B','B','B','B','B'];
var score=0;
var total = answers.length;
function getCheckedValues(radioName) {
  var radios=document.getElementsByName(radioName);
  for(var i=0;i<radios.length;i++) {
    if(radios[i].checked) return radios[i].value;
  }
}

function check_score() {
  for(var i=0;i<total;i++) {
    if(answers[i]==getCheckedValues("question"+i))
      score++;
  }
  returnScore();
}

function returnScore() {
  window.open("score_display.php");
}
window.onload=function congratulations_message() {
  if(score>3)
    document.getElementById('score-display').innerHTML="<h1>Your Score is:</h1><h2>"+score+"</h2>"+"<h1>Congratulations, You are on a path to glory!!!</h1>";
  else {
    document.getElementById('score-display').innerHTML="<h1>Your Score is:</h1><h2>"+score+"</h2>"+"<h1>Oops!!! Hard Luck! Better luck next time</h1>";
  }
}

In the above code, I'm using the variable score to calculate the score of a quiz game. When I move onto "score_display.php", another page to display the 'score' as a congratulatory message, the value of score becomes 0. I assumed that since score is a global variable it can be used across the different html files that I linked my javascript file to. Am I wrong in my assumption?

Is there any way I can retain the value of 'score'?

Yes, your assumption is wrong. Global variable is only available within the current document, it is not loaded to another document. — Teemu, Jul 18 '18 at 13:25
A new page means a new, empty context. If you need data to persist across pages, you need to use localStorage, cookies, URL parameters, or serverside data storage. — Daniel Beck, Jul 18 '18 at 13:26
https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads/30070207#30070207 — Teemu, Jul 18 '18 at 13:26

Zakaria Acharki · Accepted Answer · 2018-07-18T13:39:13.897

First, you can't pass the javascript variables between pages, the new pages are out of the scope. Take a look to the post " Persist variables between page loads ".

There's many solutions to use in this case like localStorage, cookies, windows.name..., But I suggest a simple solution, you could pass the score variable to your php file score_display.php as a parameter simply using the GET method, like:

function check_score() {
    for(var i=0;i<total;i++) {
        if(answers[i]==getCheckedValues("question"+i))
            score++;
    }
    returnScore(score);
}

function returnScore(_score) {
    window.open("score_display.php?score="+_score);
}

Then you could show it inside your PHP code using $_GET['score'] in the other side (server side).

score 1 · Answer 2 · answered Jul 18 '18 at 13:30

When you include a JavaScript file in a webpage, all of the global variables in the script are associated with that webpage context.

If you include the same JavaScript file in a different webpage, that webpage context is inherently separate from the first one and the copy of the JavaScript file associated with the latter will initialize independently of the first - i.e. values of global variables will not be shared.

To communicate between different related webpages, I recommend using Session/Local Storage (HTML5 Web Storage). Alternatively, use a PHP-based solution (see other answers to the question)

score 0 · Answer 3 · answered Jul 18 '18 at 13:27

Global variables are in scope for the document they are loaded for. In order to pass variables from one html page to an other you will have to POST them or add them as a query parameter like so ( that is a GET request

window.open("score_display.php?score="+_score);

Unable to use javascript variable when I load a new html page

3 Answers3