个人中心
gpt4 book ai didi

javascript - 当我的增量游戏代码运行时，html 文件中的按钮实例未加载

转载 作者：行者123 更新时间：2023-11-28 16:45:29 25 4
gpt4 key购买 nike

我正在使用JavaScript创建一个增量游戏和html ，并且我遇到一个问题，即在运行某些代码时某些 html 按钮元素未加载。

这是我的主要 JavaScript 文件:

import Store from "./store.js";

window.onload = ()=>{

    let fishCount = 0;
    let lifeTimeFishCount = 0;
    let cps = 0;
    //cookies per click
    let cpc = 1;

    const fishCountSite = document.getElementById("fishCount");
    const cpsSite = document.getElementById("fpsCounter");
    const goFishing = document.getElementById("fishBtn");
    const storeBtns = document.getElementsByClassName("buyBtn");

    let store = new Store();

    function onClick() {
      fishCount += cpc;
      lifeTimeFishCount += cpc;
      return fishCount;
    }

    function main() {
      goFishing.addEventListener("click", function() {
        onClick();
        fishCountSite.innerHTML = fishCount;
      });
      store.store(fishCount, storeBtns);
    }

    main();

}

这是 store.js 文件:

export default class Store {
    constructor() {
      this.fishPole = {
        price: 50,
        cps: 0.5,
        amount: 0
      };

      this.net = {
        price: 300,
        cps: 2,
        amount: 0
      };

      this.boat = {
        price: 2500,
        cps: 15,
        amount: 0
      };

      this.crew = {
        price: 21000,
        cps: 120,
        amount: 0
      };

      this.yacht = {
        price: 180000,
        cps: 900,
        amount: 0
      };

      this.factory = {
        price: 1000000,
        cps: 8000,
        amount: 0
      };

      this.portal = {
        price: 10000000,
        cps: 70000,
        amount: 0
      };
    }

    test(fishCount){
      if(fishCount >= this.fishPole.price){
        console.log("enough money to buy fishing pole");
      }
    }

    store(fishCount, storeBtns) {
      storeBtns[0].addEventListener("click", function() {
        this.test();
      });
    }
  }

这是主要的index.html 文件:

<!DOCTYPE html>
<html>
  <head>
    <title>Fish Game</title>
    <meta charset="UTF-8" />
    <link real="stylesheet" href=".src/styles.css" type="text/css" />
  </head>

  <body>
    <div class="title">
      <img src="./src/images/fish.png" alt="" />
      <h1>Fish Game</h1>
    </div>
    <div class="app">
      <div class="fishPole">
        <img src="./src/images/fishingrod2.png" alt="" id="fishPole" />
      </div>
      <div class="fishBtn">
        <button type="button" id="fishBtn">Go Fishing!</button>
      </div>
      <div class="fishCount">
        <div id="fishCountLabel">Fish Count:</div>
        <div id="fishCount">0</div>
        <div id="fpsCounter">FPS: 0</div>
      </div>
      <div class="store">
        <div id="storeName">Bait Shop</div>
        <div id="storeFront"></div>
      </div>
    </div>
    <div class="app2">
      <div class="structures">
        <div id="structureLabel">Structures</div>
      </div>
    </div>
    <div class="app3">
      <div class="structureStore">
        <div id="structureStoreTitle">Store</div>
        <div id="fishingPole" class="structureStoreItems">Fishing Pole
          <button type="button" class="buyBtn" id="fishingPoleBtn">Buy</button>
        </div>
        <div id="net" class="structureStoreItems">???
          <button type="button" class="buyBtn" id="netBtn">Buy</button>
        </div>
        <div id="boat" class="structureStoreItems">???
          <button type="button" class="buyBtn" id="boatBtn">Buy</button>
        </div>
        <div id="crew" class="structureStoreItems">???
          <button type="button" class="buyBtn" id="crewBtn">Buy</button>
        </div>
        <div id="yacht" class="structureStoreItems">???
          <button type="button" class="buyBtn" id=yachtBtn>Buy</button>
        </div>
        <div id="fishFactory" class="structureStoreItems">???
          <button type="button" class="buyBtn" id="fishFactoryBtn">Buy</button>
        </div>
        <div id="fishPortal" class="structureStoreItems">???
          <button type="button" class="buyBtn" id="fishPortalBtn">Buy</button>
        </div>
      </div>
     </div>
    </div>
  </body>
  <script src="./src/index.js" type="module"></script>
</html>

当我使用 http-server 节点包或在codesandbox.io 中运行此命令并按下按钮时，我收到此错误 Uncaught TypeError: this.test is not a function at HTMLButtonElement.<anonymous> (store.js:57)我之前发布过这个问题，给出的解决方案是包装我的 index.js文件在 window.onload 。我这样做了，但我仍然遇到同样的问题。我查看了我的主要 index.html文件并找不到任何问题。我已经解决这个问题有一段时间了，但毫无进展。非常感谢任何帮助。

最佳答案

发生这种情况是因为您在 store 函数内声明的匿名函数未绑定(bind)到类上下文，因此无法访问 this。 this 而是指函数本身。这可以通过使用没有自己的上下文的箭头函数来解决。

您应该将 store 实现替换为以下内容:

store(fishCount, storeBtns) {
    storeBtns[0].addEventListener("click", () => {
        this.test();
    });
}

或者您可以执行以下操作:

store(fishCount, storeBtns) {
    storeBtns[0].addEventListener("click", function {
        this.test();
    }.bind(this));
}

甚至

store(fishCount, storeBtns) {
    storeBtns[0].addEventListener("click", this.test);
}

关于javascript - 当我的增量游戏代码运行时，html 文件中的按钮实例未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60606094/

25 4 0
文章推荐： python 微框架和请求库
文章推荐： html - 如何使用 css 加入我的列表和 div？
文章推荐： python - 有序双向链表
文章推荐： python - 保护 Nose 免受 Python 解释器崩溃
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com