Оценка не обновляется. Подскажите, пожалуйста, что не так с кодом?
Оценка не обновляется. Пожалуйста, помогите мне обновить счет. Когда я нажимаю кнопку с функцией «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.
Проблема была решена, но текст продолжает увеличиваться и перекрывает его.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Элементы 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();
Пожалуйста. Пожалуйста, примите ответ, если это так.
Но когда код запускается, числа начинают перекрывать друг друга. У вас есть способ исправить это.
Вы можете очистить холст перед вставкой нового значения, добавив ctx.clearRect(0, 0, c.width, c.height); перед ctx.fillText. Я отредактирую свой ответ, чтобы вставить это.
Холст не поддерживает ссылку на вашу переменную (или любые значения в этом отношении). Canvas похож на изображение, у него нет DOM. Вам нужно будет снова вызвать drawScore() и, возможно, очистить эту часть холста перед рисованием.
function addScore(){
score++;
drawScore();
}
Вы должны использовать другой подход к кодированию, сохраняя 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>
Используйте способ
Element.onclick = function(){ addScore(); }JavaScript, убедившись, что ваша переменная score указана выше.