if/else 运算符不变

Question

我正在根据分数用不同的 GameOver Text 编写游戏

代码如下：

<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">oldHeader</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";
    } else {
        scoretext = "Text5";
    }
    document.getElementById("customegotext").innerHTML = scoretext;
</script>

问题是无论分数是多少，它总是显示“text5”。

感谢您的帮助

精度：

• 所有代码都在 index.HTML 文件中

• 值“score”是由这段代码在.JS文件中定义的

  // 定义变量 var player, score, stop, ticker;

• 我是编码初学者

Answer 1

问题是无论分数是多少，它总是显示“text5”。

有两个原因：

1. score 是一个 HTMLElement，而不是一个数字。这是一个由浏览器自动创建的全局变量，因为你已经给了元素id="score"。要访问它的值，您可以使用score.value，它是一个字符串。您可以通过各种方式将该字符串转换为数字； this answer 描述了它们。

2. 一开始您只运行一次脚本。当score 元素的值发生变化时，没有什么可以让它在以后自动运行。你需要故意这样做。搜索“JavaScript 事件处理”、“DOM 事件处理”或类似内容，了解如何设置 DOM 事件处理程序。

---

旁注：我不喜欢依赖自动全局变量，尤其是因为浏览器中的全局命名空间难以置信拥挤，并且一些 id 值没有获得自动全局变量，因为它们会与现有的全局冲突。相反，我建议使用document.getElementById("score") 来获取 HTMLElement 实例。

Answer 2

Js 不知道 html 内容发生了变化，所以你必须像这样检查 span 内的值是什么：

var score = document.getElementById("score").value;

您必须在每次要重置文本时定义分数。

此外，您的脚本仅在您打开页面时执行一次，因此它将获取默认 html 的值undefined，因为您的 span 为空。这就是你得到"Text5"的原因。

如果要动态执行此操作，则必须创建一个事件，例如当用户单击按钮时。