分数不更新。你能告诉我代码有什么问题吗？

Question

分数没有更新。请帮我更新分数。当我点击带有 'addScore' 功能的按钮时，显示的分数不会更改为新分数。

我尝试了很多东西。没有一个有效

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();

我期待它更新乐谱，但它没有。它保持在 0。

问题已解决，但文字一直在增加，并且重叠了。

Answer 1

HTML 元素对变量变化没有反应。当您使用 drawScore 创建元素时，您通知了当前 score 值并将其插入 DOM，但是，更新 score 不会更新它，因为它不是引用。

要完成这项工作，您需要在每次点击时更新 ctx 文本。一个简单的例子是：


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();

Answer 2

canvas 不会保留对您的变量（或与此相关的任何值）的引用。 Canvas 就像一个图像，它没有 DOM。您将需要再次调用 drawScore() 并可能在绘制之前清除 canvas 的那部分。

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

Demo

Answer 3

您应该使用不同的编码方法，将 CSS 和 JavaScript 与 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?

javascript

auto-update