带有 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/