带有DOM事件处理程序的JavaScript运算符不起作用

Question

我正在编码一个游戏，当游戏结束时，我想根据得分显示一个特定的文本。

这是我编写的代码：

    <div id="game-over">
      <h3><font color="orange">Tu as courus <span id="score"></span> mètres, tu peux faire mieux (ou pas)</font></h3>
      <h1 id="customegotext" onmouseover="mouseOver()" onmouseout="mouseOut()">Passe ta souris içi</h1>
      <a href="javascript:void(0)" class="button restart">Réessayer ?</a>
    </div>
  </div>
  <script>
      var scoretext;
    document.getElementById("score")
    if (score < 45) {
        scoretext = "Text1";
    } else if (score > 100 ) {
        scoretext = "Text2";
    } else if (score > 500 ) {
        scoretext = "Text3";
    } else if (score > 750 ) {
        scoretext = "Text4";
    } else {
        scoretext = "Text5";
    }
    document.getElementById("customegotext").innerHTML = scoretext;
function mouseOver() {
    document.getElementById("customegotext").style.color = "orange";
}

function mouseOut() {
    document.getElementById("customegotext").style.color = "black";
}
</script>

问题在于它总是显示“ text5”

感谢您的帮助，请记住，我是编码的初学者

PS：“分数”值在单独的.js文件中定义。

Answer 1

您没有在任何地方设置分数。 像这样设置
var score = document.getElementById("score").innerHTML;

在这里检查https://jsfiddle.net/Luo87449/

Answer 2

score只是一个DOM对象 （因为id默认情况下成为全局属性），因此您需要使用它的值进行比较。

score = document.getElementById("score").innerHTML

现在它将具有可以与其他Numbers进行比较的值。

另外，当该span内有值时，您需要执行此调用。

您上面发布的代码只是在span为空时在页面加载时进行此比较。

Answer 3

将您的脚本代码替换为以下代码：

<script>
    var scoretext;

    score = document.getElementById("score");

    if (score < 45) {
        scoretext = "Text1";
    } else if (score > 100 ) {
        scoretext = "Text2";
    } else if (score > 500 ) {
        scoretext = "Text3";
    } else if (score > 750 ) {
        scoretext = "Text4";
    } else {
        scoretext = "Text5";
    }

    document.getElementById("customegotext").innerHTML = scoretext;

    function mouseOver() {
        document.getElementById("customegotext").style.color = "orange";
    }

    function mouseOut() {
        document.getElementById("customegotext").style.color = "black";
    }
</script>