[我正在使用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,
ammount: 0
};
this.net = {
price: 300,
cps: 2,
ammount: 0
};
this.boat = {
price: 2500,
cps: 15,
ammount: 0
};
this.crew = {
price: 21000,
cps: 120,
ammount: 0
};
this.yacht = {
price: 180000,
cps: 900,
ammount: 0
};
this.factory = {
price: 1000000,
cps: 8000,
ammount: 0
};
this.portal = {
price: 10000000,
cps: 70000,
ammount: 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函数中声明的匿名函数未绑定到类上下文，因此无法访问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);
}