Javascript variable with InnerHtml not working

Question

I'm coding a game and in the game when you die I want a specific game over text to be displayed according to the score using innerHTLM and if/else if

I followed some tuts but it doesn't seem to work and don't know why.

Here's the code :

<div id="game-over">
      <h3><font color="orange">Tu as courus <span id="score"></span> mètres.</font></h3>
      <font color="orange"><h1 id="customegotext">Error text not found</h1></font>
      <a href="javascript:void(0)" class="button restart">Ressayer ?</a>
    </div>
  </div>
  <script>
    var scoretext;
    if ("score" < 45) {
        scoretext = "Text1";
    } else if ("score" > 100 ) {
        scoretext = "Text2";
    } else if ("score" > 500 ) {
        scoretext = "Text3";
    } else if ("score" > 750 ) {
        scoretext = "Text4";
    }
    document.getElementById("customegotext").innerHTML = scoretext;
</script>

More details :

The variable "score" is calculater in a separate .js file specifed in the index.html ( file where the error is present ) by this line of code

<script type="text/javascript" src="ljdm.js"></script>

The game works perfectly ( .html, .js and .css are correctly related by code )
I'm a beginner into programming

Thanks for helping me !

EDIT : Here's the full code of the game.

Index.html :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>LE JEU DES MANDARINES</title>
  <link rel="stylesheet" href="ljdm.css" type="text/css" media="screen">
  <script type="text/javascript" src="jquery.2.1.1.min.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="sound sound-off"></div>
    <div id="menu">
      <div id="progress">
        <div id="percent">Téléchargement: <span id="p"></span></div>
        <progress id="progress-bar" value="0"></progress>
      </div>
      <div id="main">
        <h1>LE JEU DES MANDARINES</h1>
        <ul>
          <li><a href="javascript:void(0)" class="button play">JOUER</a></li>
          <li><a href="javascript:void(0)" class="button credits">Les Credits</a></li>
          <li><a href="javascript:void(0)" class="button howto">Comment Jouer</a></li>
        </ul>
      </div>
      <div id="credits">
        <ul>
        <li class="maincredits">Inspiration Première/Vidéo des Mandarines/Notre Maître a tous : <a href="https://www.youtube.com/user/legrandjd" target="_blank">LeGrandJD</a></li>
        <li class="maincredits">Chef de projet/Idée du Jeu : <a href="https://twitter.com/k0spwn/" target="_blank">k0spwn</a></li>
        <li class="maincredits">Graphiste : <a href="https://twitter.com/seveko00" target="_blank">Seko00</a></li>
        </ul>
        <ul>
          <li class="artwork">Inspiration Première/Vidéo des Mandarines/Notre Maître a tous : <a href="https://www.youtube.com/user/legrandjd" target="_blank">LeGrandJD</a></li>
          <li class="artwork">Character design and art: <a href="https://www.youtube.com/user/legrandjd">LeGrandJD ( Julien Donzé )</a></li>
          <li class="artwork">Animation du personnage : Seko00</li>
          <li class="artwork">Les Plateformes: Seko00</li>
        </ul> 
        <ul>
          <li class="music">La Musique: <a href="https://www.youtube.com/watch?v=aHrc_F8xMXE" target="_blank">LeGrandJD ( Julien Donzé )</a></li>
          <li class="music">Jump sound effect: <a href="http://opengameart.org/content/platformer-jumping-sounds" target="_blank">dklon</a></li>
          <li class="music">Game over music: <a href="https://twitter.com/k0spwn/" target="_blank">k0spwn</a></li>
        </ul>
        <ul>
          <li class="developer">Developeurs : <a href="https://twitter.com/k0spwn/" target="_blank">k0spwn</a> et <a href="https://twitter.com/seveko00" target="_blank">Seko00</a></li>
          <li class="developer">Developeur de la base Javascript/CSS : <a href="http://blog.sklambert.com/" target="_blank">Steven Lambert</a></li>
        </ul>
          <li class="addcredits">Remerciements : <br>- Etienne LAZURE <br>- Jimmy VALECILLOS <br>- Paul ALEXANDROPOULOS <br>- LeGrandJD ( Evidemment ) <br>- La 11VP2 ( Pour nous avoir laissez travaillé en paix)</li>
        <ul>
        </ul>
        <a href="javascript:void(0)" class="button back">Retour au jeu</a>
      </div>
      <div id="howto">
         <ul>
            <h2><font color="blue">Réfere toi a ce magnifique dessin pour apprendre a jouer:</font><h2>
         </ul>   
        <a href="javascript:void(0)" class="button back">Retour au jeu</a>
      </div>
    </div>
    <canvas id="canvas" width="800" height="480">
      <p>Ton naviguateur Internet n'a pas les fonctionnalitée requise pour jouer a ce jeu</p>
      <p>Veuillez télécharger un naviguateur plus récent comme <a href="www.google.com/chrome/‎">Google Chrome</a> pour pouvoir jouer</p>
    </canvas>
    <div id="game-over">
      <h3><font color="orange">Tu as courus <span id="score"></span> mètres.</font></h3>
      <font color="orange"><h1 id="customegotext">Error text not found</h1></font>
      <a href="javascript:void(0)" class="button restart">Ressayer ?</a>
    </div>
  </div>
  <script>
    var scoretext;
    if (score > 0) {
    scoretext = "Text1";
} 

if (score > 45 ) {
    scoretext = "Text2";
}

if (score > 100 ) {
    scoretext = "Text2";
}

if (score > 500 ) {
    scoretext = "Text3";
}

if (score > 750 ) {
    scoretext = "Text4";
}
    document.getElementById("customegotext").innerHTML = scoretext;
</script>
  <script type="text/javascript" src="ljdm.js"></script>
</body>
</html>

All the code that work with the score in the .js file :

function gameOver() {
  stop = true;
  $('#score').html(score);
  $('#game-over').show();
  assetLoader.sounds.bg.pause();
  assetLoader.sounds.gameOver.currentTime = 0;
  assetLoader.sounds.gameOver.play();



 // draw the score
    ctx.font = '15pt Calibri';
    ctx.fillStyle = 'red';
    ctx.fillText('Score: ' + score + 'm', canvas.width - 450, 50);

"score" is string, score is variable. If you have score as global variable you just need to delete quote marks. — Przemysław Melnarowicz
– Przemysław Melnarowicz, Commented Apr 27, 2016 at 17:31

John Boker · Accepted Answer · 2016-04-27 17:39:50Z

4

if "score" is a variable you should use the variable score, not a string.

so, something like

var scoretext;
if (score < 45) {
    scoretext = "Text1";
} else if (score > 100 ) {
    scoretext = "Text2";
} else if (score > 500 ) {
    scoretext = "Text3";
} else if (score > 750 ) {
    scoretext = "Text4";
}
document.getElementById("customegotext").innerHTML = scoretext;

although, it is unclear in the question when this code is executed. If it's added to the page after the game is over using ajax/dynamic html it may work, otherwise something needs to trigger the code to run.

also, something else about the text, you might need to reverse the if statements or take out the elses.

if (score < 45) {
    scoretext = "Text1";
} 

if (score > 100 ) {
    scoretext = "Text2";
}

if (score > 500 ) {
    scoretext = "Text3";
}

if (score > 750 ) {
    scoretext = "Text4";
}

edited Apr 27, 2016 at 17:39

answered Apr 27, 2016 at 17:30

John Boker

83.8k17 gold badges101 silver badges130 bronze badges

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

5 Comments

k0spwn Over a year ago

Thanks but now it shows "undefined" ( where the game over text is supposed to be )

John Boker Over a year ago

check what the value of score is. You can alert(score) or console.log(score) and check the console for the value.

John Boker Over a year ago

if the score is 46 to 100, scoretext would be undefined.

k0spwn Over a year ago

Why ? And what should I do to fix this ? And weirdly any score value show undefined :/

John Boker Over a year ago

i think you'll have to show more of your code and how this code is being run before anyone here can answer your question.

Gokhan Kurt · Accepted Answer · 2016-04-27 17:30:30Z

2

The variable score is written as string. You should write it without quotes like so:

<script>
    var scoretext;
    if (score < 45) {
        scoretext = "Text1";
    } else if (score > 100 ) {
        scoretext = "Text2";
    } else if (score > 500 ) {
        scoretext = "Text3";
    } else if (score > 750 ) {
        scoretext = "Text4";
    }
    document.getElementById("customegotext").innerHTML = scoretext;
</script>

answered Apr 27, 2016 at 17:30

Gokhan Kurt

8,3151 gold badge30 silver badges55 bronze badges

Comments

Adam Buchanan Smith · Accepted Answer · 2016-04-27 17:30:33Z

2

This: if ("score" < 45) is comparing a string to an integer.

Change it to if (score < 45) which would be a (int)variable to integer.

answered Apr 27, 2016 at 17:30

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript variable with InnerHtml not working

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related