How to display a number in the DOM using javascript?

Question

It is a memory game where you flip two cards so that they are identical. if you have flipped all the identical cards, you win. It is object-oriented programming. I have a method that has to display a number(score of the player) once they have flipped all the cards. But I am stuck and I just can't get the number to be displayed on the screen So in the HTML I just hardcoded the value (see below) And the hard coded value is also not being displayed on the screen

<!-- ---------victory overlay---------- -->
    <div id="victory-text" class="overlay-text overlays">
        Victory
      <div class="overlay-text-small">
          Your Score: <span id="score">Hello</span>
      </div>  
        <span class="overlay-text-small">
            Click to restart
        </span>
    </div>

And the result is

but if the HTML is

<!-- ---------victory overlay---------- -->
    <div id="victory-text" class="overlay-text overlays">
        Victory
      <div class="overlay-text-small">
          Your Score: <span id="score">123</span>
      </div>  
        <span class="overlay-text-small">
            Click to restart
        </span>
    </div>

The result is

And the javascript is

victory(){
        clearInterval(this.countDown)//this stops the timer
        this.audioController.victory()//plays the victory sound
        this.audioController.stopMusic()//stops the background sound
        this.hideCards()//this is flips the cards to their original state
        document.getElementById("victory-text").classList.add("visible")//and this makes the overlay visible
         let score = document.getElementById("score");
        console.log(score)

and in the console, I have

The CSS code

.overlay-text{
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   justify-content: center;
   align-items: center;
   z-index: 100;
   color: #f19041;
   font-family: creepy,serif;
}
.overlay-text.visible{
 display: flex;
 flex-direction: column;
 animation:overlay-grow 500ms forwards;
}
.overlay-text-small{
   font-size: 60px; 
}

The id ="victory-text" is used in javascript to get that specific overlay(as there are other overlays as well like the game-over-text) in the victory() method

The victory function is called when all the cards are flipped. The number "123" is just a hardcoded value and later I will insert the number(the actual score) dynamically. But the hardcoded value is also not being displayed. Can someone please help me with this? I am just getting started off with javascript

The victory() is called in the cardMatch() method

cardMatch(card1, card2){
        this.matchedCards.push(card1)
        this.matchedCards.push(card2)
        card1.classList.add("matched")
        card2.classList.add("matched")
        this.audioController.match()
         if (this.matchedCards.length === this.cardsArray.length) {
             this.victory()
         }
        
    }

I don't see anything wrong with the parts that you posted, accessing innerHTML like that should work with both numbers and strings. Would you mind posting more of your code, so maybe we can help you out. — MauriceNino
– MauriceNino, Commented Nov 3, 2021 at 16:23
The .innerHTML += will not do math for you. The HTML is only usable as a string with this. If you want to add the score you have to read the value, add the new score and write the new value. Or you keep the score in a variable in general and just output that variable. — Peter Pointer
– Peter Pointer, Commented Nov 3, 2021 at 16:23
@MauriceNino I have edited the post. Please check and help me out with it — Shreeja Geeda
– Shreeja Geeda, Commented Nov 4, 2021 at 6:22
@ShreejaGeeda can you share more code? maybe the entire object. And you check your css? And your victory method you have: document.getElementById("victory-text").classList.add("visible") It means that the victory-text is display:none; , right? — Maik Lowrey
– Maik Lowrey, Commented Nov 4, 2021 at 7:27

Peter Pointer · Accepted Answer · 2021-11-03 16:46:48Z

1

You must parse the existing number and then add to it. innerHTML += is not intended to do math.
Here is an example using parseInt.

function victory() {
  let score = document.getElementById("score");
  score.innerText = parseInt(score.innerText) + 123;
}

victory();

answered Nov 3, 2021 at 16:46

Peter Pointer

4,2542 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maik Lowrey · Accepted Answer · 2021-11-03 16:26:56Z

0

You forgot to declare victory as function.

function victory() {...} instead victory() {...}

function victory() {
  let score = document.getElementById("score");
  score.innerHTML = 123;
}

victory();

<div id="victory-text" class="overlay-text overlays">
    Victory
    <span id="score" class="overlay-text-small">Your score:</span>
    <span class="overlay-text-small">
            Click to restart
    </span>
</div>

answered Nov 3, 2021 at 16:26

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

4 Comments

Louisb Boucquet Over a year ago

it did work with "hello world" maybe function just wasn't included in the question?

Maik Lowrey Over a year ago

@LouisbBoucquet function is not up and then it can't work either. with function the code works. so i assume that's what it was. but who knows... ;-)

Shreeja Geeda Over a year ago

it is object-oriented programming, so the victory() is a method

Maik Lowrey Over a year ago

@ShreejaGeeda Now I see it. Did I read over that yesterday??? I am confused :-) I'll update my answer in a moment.

Louisb Boucquet · Accepted Answer · 2021-11-03 16:36:42Z

Assigning element.innerHTML is a red flag that something might not be quit right. Adding content to html should generaly happen through element.innerText

Another problem is that you apend the score to the existing html. That means that if you call the function a second time the previous score will still be shown.

function victory() {
  let score = document.getElementById("score");
  score.innerText += (123).toString();
}

victory()

<div id="victory-text" class="overlay-text overlays">
  Victory
  <span class="overlay-text-small">Your score: <span id="score"></span></span>
  <span class="overlay-text-small">
    Click to restart
  </span>
</div>

Now you can call the function multiple times without problems while avoiding element.innerHTML.

Collectives™ on Stack Overflow

How to display a number in the DOM using javascript?

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related