Calculate the score for Memory Game based on number of turns , time and matches

Question

I'm developing a memory game and i need to calculate the fair score for the game, based on:

number of tries, time and number of matches

So, i tried using a function to calculate the score, but when i tried to display the score in the winning screen, the score do not appear. Help me out with this

the variables are

var matches = 0;
var moves = 0;
var counter = document.querySelector(".moves");

To check for the matches:

for (i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function (e) {
var turnable = e.target.dataset.turnable;


//first click
if (!wait && lastKnownButtonId == undefined && lastKnownButtonNumber == undefined && turnable == 'true') {
  e.target.dataset.turnable = 'false';

  e.target.innerHTML = getgImage(event.target.dataset.number);
  e.target.style.backgroundColor = 'yellow';

  lastKnownButtonId = e.target.id;
  lastKnownButtonNumber = e.target.dataset.number;

}
//second click
else if (!wait && lastKnownButtonId != undefined && lastKnownButtonNumber != undefined && turnable == 'true' && e.target.id != lastKnownButtonId) {
  e.target.dataset.turnable = 'false';

  e.target.innerHTML = getgImage(event.target.dataset.number);




  //match
  if (e.target.dataset.number == lastKnownButtonNumber) {
    e.target.style.backgroundColor = '#00FF7F';
    document.getElementById(lastKnownButtonId).style.backgroundColor = '#00FF7F';

    lastKnownButtonId = undefined;
    lastKnownButtonNumber = undefined;

    matches++;


    if (matches == 8) {

      document.getElementById("finalMove").innerHTML = moves;

    showWinScreen();
    //clearTimeout(timeoutHandle);


    }

  }

  //no match
  else {
    document.getElementById(lastKnownButtonId).style.backgroundColor = 'red';
    e.target.style.backgroundColor = 'red';
    wait = true;

    setTimeout(() => {
      e.target.dataset.turnable = 'true';
      e.target.style.backgroundColor = 'white'
      e.target.innerHTML = getgImage(0);


      var tempLastClickedButton = document.getElementById(lastKnownButtonId);

      tempLastClickedButton.dataset.turnable = 'true';
      tempLastClickedButton.style.backgroundColor = 'white';
      tempLastClickedButton.innerHTML = getgImage(0);

      lastKnownButtonId = undefined;
      lastKnownButtonNumber = undefined;
      wait = false;
    }, 1000);


  }
  moveCounter();
}
}); 
}

i have inserted a function to calculate the score

 function calcScore(){
 var tilesbonus = (16 - matches) * 20; // 20 points for each successful tile
var timebonus = (60 - finaltime) * 8;  // 8 points for each second
var triesbonus = (48 - moves) * 10;  // (deduct) 10 points for each try
if (tilesbonus <0) { tilesbonus = 0; }
if (timebonus <0) { timebonus = 0; }
if (triesbonus <0) { triesbonus = 0; }
var totalscore= tilesbonus + timebonus + triesbonus;
return totalscore;
}

The function for timer:

window.onload = function() {
var timeoutHandle;
function countdown(minutes, seconds) {
function tick() {
var timecounter = document.getElementById("timer");
timecounter.innerHTML = minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
seconds--;
if (seconds >= 0) {
timeoutHandle = setTimeout(tick, 1000);
} else {
if (minutes >= 1) {
setTimeout(function () {
countdown(minutes - 1, 59);
}, 1000);
}
}
if (seconds==0 && minutes ==0){

alert("Game over");
//reset();
}
if (matches==8){
var totalscore = calcScore();
clearTimeout(timeoutHandle);
var finaltime= timecounter.innerHTML;
document.getElementById("seconds").innerHTML= finaltime;
document.getElementById("score").innerHTML=totalscore;

}
}
tick();
}

countdown(1, 00); }

the Move counter:

function moveCounter(){
moves++;
counter.innerHTML = moves;
}

the calscore() function is called when the game ends

 if (matches==8){
 calcScore();
 clearTimeout(timeoutHandle);
 var finaltime= timecounter.innerHTML;
 document.getElementById("seconds").innerHTML= finaltime;
 document.getElementById("score").innerHTML=totalscore;
 document.getElementById("finalMove").innerHTML = moves;
 }

The html code where the score should appear is :

  <p><font size= "5">Your score: <span id=score> </span></font></p>

Answer 1

It's because you try to use a variables defined in a fonction from the global scope

here's an explanation of javascript scopes

basically if you declare a variable inside a fonction you can't use it outside of it

corrected and commented your code about this specific problem

var matches = 8
var finaltime = 42
var moves = 13

function calcScore(){
  var tilesbonus = (16 - matches) * 20; // 20 points for each successful tile
  var timebonus = (60 - finaltime) * 8;  // 8 points for each second
  var triesbonus = (48 - moves) * 10;  // (deduct) 10 points for each try
  if (tilesbonus <0) { tilesbonus = 0; }
  if (timebonus <0) { timebonus = 0; }
  if (triesbonus <0) { triesbonus = 0; }
  var totalscore= tilesbonus + timebonus + triesbonus; // you defined the variable here
  return totalscore;
} // totalscore is destroyed after the end of the function

if (matches==8){
  var totalscore = calcScore(); // I modified this line and now it works
  // I declare a new variable which contains the value returned by calcScore

  clearTimeout(null); // i don't have the timeout var so I can't clear it
  var finaltime= timecounter.innerHTML;
  document.getElementById("seconds").innerHTML= finaltime;
  document.getElementById("score").innerHTML=totalscore; // finally use the variable
}

<p><font size= "5">Your score: <span id=score> </span></font></p>
<p><font size= "5">finalTime: <span id=seconds> </span></font></p>
  
<span id=timecounter>42</span>