javascript - 简单点数计数器,Javascript 未显示

标签 javascript html css web

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

我试过将 javascript 放在 header 的标记中,但它仍然没有显示。

<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,因此您需要先加载它。

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

关于javascript - 简单点数计数器,Javascript 未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57503295/

相关文章:

javascript - 具有绝对位置的CSS强制div位于具有静态位置的div之后

css - 像 Instagram 一样 react 原生网格

JavaScript 用 HTML 替换文本不起作用?

javascript - 清除html5表单错误

javascript - 如何将复选框添加到 #{{link-to}} 帮助程序中

php - 如何存储多维表单数据?

javascript - jQuery DataTable 列单元格中的中心元素

css - 动画平滑的 css 网格列更改

用于向某些元素添加自定义属性的 Javascript

javascript - 为什么 DOM 对象在控制台中的显示与一般 Javascript 对象不同?