带有 InnerHtml 的 Javascript 变量不起作用

Posted 2023-05-07

技术标签:

【中文标题】带有 InnerHtml 的 Javascript 变量不起作用【英文标题】：Javascript variable with InnerHtml not working 【发布时间】：2016-08-22 03:57:36 【问题描述】：

我正在编写一个游戏，当你死后在游戏中我希望使用 innerHTLM 和 if/else if 来根据分数显示特定游戏的文本

我听了一些 tuts，但它似乎不起作用，也不知道为什么。

代码如下：

<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>

更多细节：

变量“score”是由这行代码在 index.html（存在错误的文件）中指定的单独 .js 文件中的计算器

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

游戏完美运行（.html、.js 和 .css 通过代码正确关联）

我是编程初学者

谢谢你帮助我！

编辑：这是游戏的完整代码。

索引.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"  >
      <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>

.js 文件中所有与乐谱相关的代码：

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" 是字符串，score 是变量。如果你有 score 作为全局变量，你只需要删除引号。 【参考方案1】：

如果“score”是一个变量，你应该使用变量score，而不是字符串。

所以，像

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;

虽然，这个代码何时执行的问题尚不清楚。如果在游戏结束后使用 ajax/dynamic html 将其添加到页面中，它可能会起作用，否则需要触发代码运行。

另外，关于文本的其他内容，您可能需要反转 if 语句或取出 else。

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

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


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


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

【讨论】：

谢谢，但现在它显示“未定义”（应该是文本游戏的位置）检查score的值是多少。您可以alert(score) 或console.log(score) 并检查控制台的值。如果分数是 46 到 100，scoretext 将是未定义的。为什么？我应该怎么做才能解决这个问题？奇怪的是，任何得分值都显示未定义：/ 我认为您必须展示更多代码以及此代码的运行方式，然后这里的任何人才能回答您的问题。【参考方案2】：

变量score 写成字符串。你应该这样写而不带引号：

<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>

【讨论】：

【参考方案3】：

这：if ("score" < 45) 正在将字符串与整数进行比较。

将其更改为if (score < 45)，这将是一个整数的（int）变量。

【讨论】：

以上是关于带有 InnerHtml 的 Javascript 变量不起作用的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript。在循环执行期间没有更新带有 innerHTML 的循环

如何在javascript中插入带有innerHTML的php数组

带有 InnerHtml 的 Javascript 变量不起作用

PHP-在表格的每一行中动态插入带有javascript的innerhtml

使用 javascript 或 jQuery 隐藏所有带有与数字“0”或自定义值匹配的文本或 innerHTML 的“a”元素

JavaScript：触发事件恢复 innerHtml 属性