title: Add a score counter to a game using html and JavaScript
body: <p>I'm extremely new to JavaScript and programming, but I was wondering if anyone could help me with trying to add a score counter to my maths game. The site randomly generates a multiplication question, which is checked and then a message appears saying whether they got the question right or not. I've added a timer and I've tried to add a score counter but failed. Here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;script type="text/javascript" src="assets/stylesheets/script.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="assets/stylesheets/main.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Learning to multiply&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onload="genQuestion();"&gt;
  &lt;h1&gt;Learning to multiply&lt;/h1&gt;
  &lt;form name="myForm" id="myForm" action="#"&gt;
  &lt;label&gt;What is...&lt;/label&gt;
  &lt;input id="question" name="question" type="text" /&gt;
  &lt;br&gt;
  &lt;label&gt;My answer is...&lt;/label&gt;
  &lt;input name="answer" id="answer" type="text" /&gt;
  &lt;br&gt;
  &lt;input class="button" name="Check my answer..." type="button" value="Check my answer..." onclick="buttonPressed()" /&gt;
  &lt;/form&gt;
      &lt;div class="score-board"&gt;
    &lt;div class="player"&gt;
        &lt;h4&gt;Your score&lt;/h4&gt;
        &lt;div class="score-box"&gt;
           0 
        &lt;/div&gt;
    &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is my js file:</p>
  
  <pre><code>var x, y;
  
  
  
          function aNumber() {
          return 1 + Math.round(Math.random() * 11);
          }
  
          function genQuestion(){
              x = aNumber();
              y = aNumber();
              dout = document.getElementById("question");
              dout.value = x + " times " + y;
           }
  
          function buttonPressed() {
          var mult = document.getElementById("answer").value;
  
  
  
           var posStatements = [
              "Very Good", 
              "Excellent", 
              "Correct - Nice Work!", 
              "Correct - Keep up the good work"];
  
          var negStatements = [
              "No. Please try again", 
              "Wrong. Try once more", 
              "Incorrect - Don't give up", 
              "No - keep trying"];
  
           if (mult == x*y) 
              {
                  window.alert(posStatements[Math.round(Math.random() * 3)]);
          }
          else 
          {
                  window.alert(negStatements[Math.round(Math.random() * 3)]);
          }
  
          location.reload();
          }
  
  var score=0 
  var score = document.getElementById("score-box").value;
  function scoreboard() {
      if (mult == x*y)
          {score= score +1}
  }
  
  window.onload = function timer() {
  var secs = 0;
      var id = setInterval(function timer(){ 
          secs++; console.log(secs);
        if(secs&gt; 9){
          clearInterval(id);
          alert("Time's up!");
         }
      }, 1000);
  }    
  </code></pre>
  
  <p>I'm aware it doesn't work but I have no idea how to go about this...
  Thank you!</p>