时间戳

首页 > 解决方案 > 单击按钮时数字不更新。控制台还给出了“游戏”未再次定义的错误。任何帮助表示赞赏

javascript - 单击按钮时数字不更新。控制台还给出了“游戏”未再次定义的错误。任何帮助表示赞赏

问题描述

对 JS 和一般编程来说非常新。我正在学习一个教程并遇到了另一个障碍。我收到一条错误消息，提示“游戏”未与单击按钮时未更新的数字一起定义。我密切关注教程，不知道我哪里出错了，主要是因为我是 JS 的新手。任何帮助表示赞赏。

代码：

<!DOCTYPE html>
<html>

<body>
  <div class="sectionLeft">
    <center>
      <div class="scoreContainer unselectable">
        <span id="score">0</span> films<br>
        <span id="scorePerSecond">0</span> films per second</p>
      </div>
      <br>
      <div class="clickerConatiner unselectable">
        <button onclick="game.addToScore(game.clickValue)">Produce Film</button>
      </div>
    </center>

    <div class="sectionFooter">
      <h5>Film Clicker</h5>
      <button onclick="resetGame();">Reset Game</button>
    </div>
  </div>

  <div class="sectionRight" id="shopContainer">
    <table class="shopButton unselectable" onclick="buyCursor()">
      <tr>
        <td id="image"><img src="cursor.png"></td>
        <td id="nameAndCost">
          <p>Cursor</p>
          <p><span id="cursorCost">15</span> films</p>
        </td>
        <td id="amount"><span id="cursors">0</span></td>
      </tr>
    </table>

    <table class="shopButton unselectable" onclick="buyCamera()">
      <tr>
        <td id="image"><img src="camera.png"></td>
        <td id="nameAndCost">
          <p>Camera</p>
          <p><span id="cameraCost">50</span> films</p>
        </td>
        <td id="amount"><span id="cameras">0</span></td>
      </tr>
    </table>

    <table class="shopButton unselectable" onclick="buyLighting()">
      <tr>
        <td id="image"><img src="lighting.png"></td>
        <td id="nameAndCost">
          <p>Lighting</p>
          <p><span id="lightingCost">100</span> films</p>
        </td>
        <td id="amount"><span id="lighting">0</span></td>
      </tr>
    </table>
  </div>

  <script>
    var game = {
      score: 0,
      totalScore: 0,
      totalClicks: 0,
      clickValue: 1,
      version: 0.000,

      addToScore: function(amount) {
        this.score += amount;
        this.totalScore += amount;
        display.updateScore();
      },

      getScorePerSecond: function() {
        var scorePerSecond = 0;
        for (i = 0; i < bulding.name.length; i++) {
          scorePerSecond += building.income[i] * building.count[i];
        }
        return scorePerSecond;
      }
    };

    var building = {
      name: [
        "Cursor",
        "Camera",
        "Lighting"
      ],
      image: [
        "cursor.png",
        "camera.png",
        "lighting.png"
      ],
      count: [0, 0, 0],
      income: [
        1,
        15,
        155
      ],
      cost: [
        15,
        50,
        100
      ],

      purchse: function(index) {
        if (game.score >= this.cost[index]) {
          game.score -= this.cost[index];
          this.count[index]++;
          this.cost[index] = Math.ceil(this.cost[index] * 1.10);
          display.updateScore();
          display.updateShop();
        }
      }
    };

    var display = {
      updateScore: function() {
        document.getElementById("score").innerHTML = game.score;
        document.getElementById("scorePerSecond").innerHTML = game.scorePerSecond;
        document.title = game.score + " films - Film Clicker";
      }

      updateShop: function() {
        document.getElementById("shopContainer").innerHTML = "";
        for (i = 0; i < building.name.length; i++) {
          document.getElementById('shopContainer').innerHTML += "<table class="
          shopButton unselectable " onclick="
          building.purchase('+i+')
          "><tr><td id="
          image "><img src=" + building.image[i] + "></td><td id="
          nameAndCost "><p>'+building.name[i]+'</p><p><span>'+building.cost[i]+'</span> films</p></td><td id="
          amount "><span>+'building.count'[i]+'</span></td></tr></table>";
        }
      }
    };

    windown.onload = function() {
      display.updateScore();
      disaply.updateShop();
    }
  </script>
</body>

</html>

标签： javascripthtml

解决方案

您的 <script>.

  1. 在和var display之间应该有一个逗号。updateScore: ...updateShop: ...

  2. updateShop的for循环体中存在各种错误。

    1. 双引号内有双引号，这是不允许的。转义内部的\"或在外部使用单引号。
    2. 请记住，您正在连接字符串，因此开始和结束引号应该是一致的，并且加号应该在引号之外。

    它应该是：

document.getElementById('shopContainer').innerHTML += '<table class="shopButton unselectable" onclick="building.purchase('+i+')"><tr><td id="image"><img src="'+building.image[i]+'"></td><td id="nameAndCost"><p>'+building.name[i]+'</p><p><span>'+building.cost[i]+'</span> films</p></td><td id="amount"><span>'+building.count[i]+'</span></td></tr></table>'

推荐阅读