The score is not updating. Can you please tell me what is wrong with the code?

Question

The score is not updating. Please help me make the score update. When I click the button with the function for 'addScore', the displayed score will not change to a new one.

I have tried a lot of things. Non of which have worked

var score = 0;

function addScore(){ score ++ }

function drawScore() { 
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.font = "16px Arial";
 ctx.fillStyle = "red";
 ctx.fillText("Score: " +score, 8, 20);
}

drawScore();

I am expecting it to update the score, but it does not. It remains at 0.

The problem has been solved bu the text keeps increasing and over laps it.

Use the `Element.onclick = function(){ addScore(); }` JavaScript way, making sure that your score variable is above. — StackSlave, May 30 '19 at 02:11

Renan Souza · Accepted Answer · 2019-05-30T02:41:22.360

0

HTML elements are not reactive to variables changes. When you created the element with drawScore you informed the current score value and inserted this into DOM, however, updating score will not update this because it is not a reference.

To make this work you will need to updated ctx text on every click. One simple example would be:


var score = 0;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function addScore(){
 score++;
 setScore();
}

function drawScore() { 
 ctx.font = "16px Arial";
 ctx.fillStyle = "red";
 setScore();
}

function setScore() {
 ctx.clearRect(0, 0, c.width, c.height);
 ctx.fillText("Score: " +score, 8, 20); 
}

drawScore();

edited May 30 '19 at 02:41

answered May 30 '19 at 02:10

Renan Souza

905
9
25

You're welcome. Please accept answer if this is the case. – Renan Souza May 30 '19 at 02:22
But when the code is run the numbers start to over lap each other. Do you have any way to fix this. – Paul Starr May 30 '19 at 02:33
You can clean the canvas before inserting the new value, add `ctx.clearRect(0, 0, c.width, c.height);` before `ctx.fillText`. I'll edit my answer to insert this. – Renan Souza May 30 '19 at 02:40

score 0 · Answer 2 · answered May 30 '19 at 02:16

The canvas does not maintain a reference to your variable (or any values for that matter). Canvas is like an image, it does not have a DOM. You will need to call drawScore() again and maybe clear that portion of the canvas before drawing.

function addScore(){
    score++;
    drawScore();
}

Demo

score 0 · Answer 3 · answered May 30 '19 at 02:41

You should use a different coding approach, keeping your CSS, and JavaScript separate from your HTML.

//<![CDATA[
/* external.js */
var doc, bod, M, I, S, Q, score = 0, addScore, drawScore; // for use on other loads
addEventListener('load', function(){ // make yourself a tiny library
doc = document; bod = doc.body;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
addScore = function(){
  return ++score;
}
var canvas = I('canvas'), ctx = canvas.getContext('2d'), add = I('add');
ctx.font = '16px Arial'; ctx.fillStyle = 'red';
drawScore = function(){
  ctx.clearRect(0, 0, 160, 90); ctx.fillText('Score: '+score, 8, 20);
}
add.onclick = function(){
  addScore(); drawScore();// other functions or code here
};
}); // end load
//]]>

/* external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px;
}
#canvas{
  background:#fff;
}
#add{
  display:block; padding:3px 5px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='content'>
    <canvas id='canvas' width='160' height='90'></canvas>
    <input id='add' type='button' value='add score' />
  </div>
</body>
</html>

The score is not updating. Can you please tell me what is wrong with the code?

3 Answers3