У меня есть index.html, в котором есть окно состояния для моей игры, и оно отображает количество собранных вами конфет и бусин, обновляя его в реальном времени, когда пользователь сталкивается с конфетами и бусинками.
Весь мой index.html: Кроме того, status-window div находится внизу. Вот где я показываю количество конфет и бисера. Остальная часть разметки предназначена для игрового окна.
<html>
<title>Mardi Gras Parade!</title>
<!-- JS -->
<script src='scripts/jquery.min.js'></script>
<script src='scripts/page.js'></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style/style.css">
<!-- HTML -->
<body>
<div class='outer-container'>
<div class='game-window'>
<div id="actualGame">
<div id='player' class='playerObject'>
<img class='player-avatar' src='img/person.png' height='50px'/> <!--person img: src='https://www.google.com/imgres?imgurl=http%3A%2F%2Fclipart-library.com%2Fnew_gallery%2F54-540691_others-clipart-helpful-person-generic-person.png&imgrefurl=http%3A%2F%2Fclipart-library.com%2Fclip-art%2F54-540691_others-clipart-helpful-person-generic-person.htm&tbnid=V19QgOYn0jYyzM&vet=12ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg..i&docid=hVn27RN51ga3yM&w=920&h=830&q=person&hl=en&ved=2ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg'-->
</div>
<div id="paradeRoute">
<div id="dottedLine"></div>
<div id="paradeFloats">
<div id="paradeFloat1" class='paradeFloat'>
<img src='img/parade_float_1.gif' height='80px'/> <!-- src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2Fb0a85a880dc856c8129f51d506469510_mardi-gras-background-transparent-png-clipart-free-download-ywd_474-256.gif&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Ftransparent-background-mardi-gras-float-clipart-231098.html&tbnid=QDcU0K_06jcQJM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ..i&docid=7_c8q7QtWx89bM&w=474&h=256&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ -->
</div>
<div id="paradeFloat2" class='paradeFloat'>
<img src='img/parade_float_2.png' height='80px'/> <!-- Adapted from src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2F2075f16e1c812d5ba8ecece2b6924d75_mardi-gras-clipart-at-getdrawingscom-free-for-personal-use-_340-270.jpeg&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Fmardi-gras-float-clip-art-228088.html&tbnid=_LNqQJQgyaHKcM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ..i&docid=Fv4gfo44aw_StM&w=340&h=270&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ -->
</div>
</div>
</div>
</div>
</div>
<div class='status-window' style='text-align: center'>
<h3>Welcome!</h3>
<hr>
<br>
<p>Score:</p>
<h1 id='score-box'>0</h1>
<br/>
<div>
<b># of beads collected:</b>
<span id="beadsCounter">0</span>
</div>
<div>
<b># of candy pieces collected:</b>
<span id="candyCounter">0</span>
</div>
</div>
</div>
</body>
</html>
Обновление #beadsCounter и #candyCounter количеством собранных конфет и бусин должно быть довольно простым, как вы должны уметь: (где numCandy - это целое число, которое я увеличиваю в своей логике c). Код действительно попадает в блок if-else, но выдает ошибки, когда я пытаюсь напечатать textContent для обоих.
let numBeads = 0;
let numCandy = 0;
// functions that check when candy and user collide
function checkCollisions() {
// First, check for rocket-asteroid checkCollisions
$('.throwingItem').each( function() {
let curItem = $(this); // define a local handle for this rocket
let curItemID = $(this).attr('id');
let curItemClass = $(this).attr('class');
if (isColliding($(this) , player)) {
// add yellow aura here
document.getElementById(curItemID).classList.add('yellowaura');
// after 1 second it'll fade from collision
$(this).fadeTo(1000, 0, function() {
$(this).remove();
// update score
gwhScore.html(parseInt($('#score-box').html()) + SCORE_UNIT);
console.log($(this).attr('class'));
// update # of beads collected or candy collected
if ($(this).attr('class') == 'throwingItem beads yellowaura') {
numBeads++;
console.log(numBeads);
console.log(document.getElementById('#beadsCounter').textContent);
document.getElementById('#beadsCounter').textContent = toString(numBeads);
}
else {
numCandy++;
console.log(numCandy);
console.log(document.getElementById('#candyCounter').textContent);
document.getElementById('#candyCounter').textContent = toString(numCandy);
}
})
}
});
}
Однако, это не работает для конфет или бус, как говорит консоль я:
page.js:130 Uncaught TypeError: Cannot read property 'textContent' of null
at HTMLDivElement.<anonymous> (page.js:130)
at HTMLDivElement.e.complete (jquery.min.js:3)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at i (jquery.min.js:3)
at Function.r.fx.tick (jquery.min.js:3)
at ab (jquery.min.js:3)
Кроме того, я пробовал это с innerHTML вместо textContent, и это не работает. Я попробовал это JSFiddle и подтверждает, что оно должно работать, но это просто не для меня.
textContent изначально установлен в 0 как для количества конфет, так и для шариков, поэтому он не равен нулю.