简单点数计数器，Javascript 未显示答案

【问题标题】：Simple Points Counter, Javascript is not showing up简单点数计数器，Javascript 未显示
【发布时间】：2019-12-21 12:26:52
【问题描述】：

我正在尝试在网站上构建一个非常简单的积分计数器。数字和按钮没有显示在主 HTML 中。我对javascript有点熟悉，但不知道如何在网站上实现它。帮忙？

我尝试将 javascript 放在标题中的标记中，但它仍然没有显示出来。

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/public_html/script.js"></script>
</head>


<body>

  <div id="main-container">
    <div class="health-box" id="opponent-health">
      <img src="https://www.trzcacak.rs/myfile/full/208-2086167_runic-letter-othalan-rune-odal.png">
      <div class="health-counter" id="opponent-health-counter">
      </div>
      <div class="health-adjust health-minus" id="opponent-health-minus">
        &#9660;
      </div>
      <div class="health-adjust health-plus" id="opponent-health-plus">
        &#9650;
      </div>
    </div>
    <div class="health-box" id="your-health">
      <p> LP </p>
      <div class="health-counter" id="your-health-counter">
      </div>
      <div class="health-adjust health-minus" id="your-health-minus">
        &#9660;
      </div>
      <div class="health-adjust health-plus" id="your-health-plus">
        &#9650;
      </div>
    </div>
  </div>

</body> 
</html>

$(document).ready(function() {

  //Variable set-up
  var opponentHealth = 0;
  var yourHealth = 10;

  $("#opponent-health-counter").html(opponentHealth);
  $("#your-health-counter").html(yourHealth);

  //Health adjust code
  $(".health-adjust").click(function() {
    if (this.id == "opponent-health-minus" && opponentHealth > 0) {
      opponentHealth -= 1;
    }
    else{
      opponentHealth -= 0;
    };
    if (this.id == "your-health-minus") {
      yourHealth -= 1;
    };
    if (this.id == "opponent-health-plus" && opponentHealth < yourHealth) {
      opponentHealth += 1;
    }
    else{
      opponentHealth += 0;
    };
    if (this.id == "your-health-plus") {
      yourHealth += 1; 
    };
    $("#opponent-health-counter").html(opponentHealth);
    $("#your-health-counter").html(yourHealth);
  });
});

这是一个 Pen 的链接，其中的编程按预期工作。 https://codepen.io/iph33r/full/LYPpOJm

【问题讨论】：

你需要另一个脚本标签来加载jQuery，它必须在加载你的脚本之前。
@ths 我认为他的问题是他缺少加载 jQuery 的 <script> 标记。您在编辑中修复了此问题，因此不再是同一个问题。
@Barmar 如果您看到我的编辑以某种方式改变了 OP 的意图，请随意回滚。
我不知道我需要调用 jQuery。我复制了代码，它仍然没有出现。需要在head标签中还是在body标签中？

标签： javascript html css web

【解决方案1】：

由于您的脚本使用 Jquery，您需要先加载它。

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/public_html/script.js"></script>
</head>

【讨论】：