CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jae
Jae

Reputation: 1157

Unable to change the text of a span element using Javascript

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.

Upvotes: 0

Views: 257

Answers (1)

Mamun
Mamun

Reputation: 68933

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

Upvotes: 1

Related Questions