Unable to change the text of a span element using Javascript
Question
I have a index.html that has a status window for my game, and it displays the number of candy and beads you have collected, updating it in real time as the user collides with the candy and beads.
My entire index.html : Also, the status-window div is at the bottom. That's where I display # of candy and beads. The rest of the markup is for the game window.
<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>
Updating the #beadsCounter and #candyCounter with the number of candy and beads collected should be pretty straightforward, as you should be able to do: (where numCandy is an integer I'm incrementing in my logic). The code indeed gets into the if-else block, but errors out when I try to print textContent for both.
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);
}
})
}
});
}
However, this doesn't work for candy or beads, as the console tells me:
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)
Also, I have tried this with innerHTML instead of textContent , and it doesn't work. I've tried this JSFiddle and confirms that it should work, but it just doesn't for me.
The textContent is initially set to 0 for both number of candy and beads, so it is not null.
1 answers
solution1
1 ACCPTED 2020-03-04 20:18:46
As getElementById treats the parameter value as id , you do not need to prefix the id string with the symbol # :
document.getElementById('candyCounter').textContent
Please Note: You have to prefix the symbol ( # ) when using querySelector() API:
document.querySelector('#candyCounter').textContent
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.