时间戳

首页 > 解决方案 > JavaScript 中按钮激活的困难

javascript - JavaScript 中按钮激活的困难

问题描述

我目前在制作一款有趣的游戏时遇到问题。我对 Javascript、HTML 和 CSS 很陌生，因此将显示的代码不会很好。无论如何，我遇到的问题是我的代码的按钮激活部分不起作用。这是代码（以防有其他错误），并突出显示了具体的问题区域。

//Variables and Other Basic Things

var Specs = ["Basic", "Advanced", "Insane", "Mythical", "Godly"];
var PlayerRanks = ["Begginer Grinder", "Advanced Grinder", "Insane Grinder", "Mythic Grinder", "Godlike Grinder"];
var Random = 1;

//Random Numbers

function RandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

//Player Things

var Player = {
  spec: "Plain",
  rank: "Begginer Grinder",
  points: 1000,
  pointIncreaseAmount: 1,
  timeToIncrease: 10000,
  levelIncrease: function() {
    this.points += this.pointIncreaseAmount
  }
}

//Stats of different specs

function StatChange() {
  if (Player.spec == "Basic") {
    Player.pointIncreaseAmount = 2;
    Player.timeToIncrease = 5000;
  } else if (Player.spec == "Advanced") {
    Player.pointIncreaseAmount = 5;
    Player.timeToIncrease = 4000;
  } else if (Player.spec == "Epic") {
    Player.pointIncreaseAmount = 10;
    Player.timeToIncrease = 3000;
  } else if (Player.spec == "Mythical") {
    Player.pointIncreaseAmount = 25;
    Player.timeToIncrease = 2000;
  } else if (Player.spec == "Godly") {
    Player.pointIncreaseAmount = 50;
    Player.timeToIncrease = 1000;
  }
  document.getElementById("SpecDisplay").innerHTML = "Your current spec is " + Player.spec;
}

function OpenBasicCrate() {
  Random = RandomInt(1, 129);
  if (Random < 75) {
    Player.spec = "Basic";
    Random = 1;
  } else if (Random >= 75 && Random < 120) {
    Player.spec = "Advanced";
    Random = 1;
  } else if (Random >= 120 && Random < 129) {
    Player.spec = "Epic";
    Random = 1;
  }
  StatChange();
}

function OpenBetterCrate() {
  Random = RandomInt(1, 105);
  if (Random < 30) {
    Player.spec = "Basic";
    Random = 1;
  } else if (Random >= 30 && Random < 85) {
    Player.spec = "Advanced";
    Random = 1;
  } else if (Random >= 85 && Random <= 105) {
    Player.spec = "Epic";
    Random = 1;
  }
  StatChange();
}

function OpenAdvancedCrate() {
  Random = RandomInt(1, 80);
  if (Random < 30) {
    Player.spec = "Advanced";
    Random = 1;
  } else if (Random >= 30 && Random <= 70) {
    Player.spec = "Epic";
    Random = 1;
  } else if (Random >= 70 && Random < 80) {
    PLayer.spec = "Mythical";
    Random = 1;
  }
  StatChange();
}

function OpenBetterAdvancedCrate() {
  Random = RandomInt(1, 85);
  if (Random < 80) {
    Player.spec = "Mythical";
    Random = 1;
  } else if (Random >= 80 && Random <= 85) {
    Player.spec = "Epic";
    Random = 1;
  }
  StatChange();
}

function OpenMythicalCrate() {
  Random = RandomInt(1, 100);
  if (Random < 95) {
    Player.spec = "Mythical";
    Random = 1;
  } else if (Random >= 95 && Random < 100) {
    Player.spec = "Godly";
    Random = 1;
  }
}

//Start Command also Repeating Code

function Start() {
  const pointGain = setInterval(function() {
    Player.levelIncrease()
  }, Player.timeToIncrease);
  const alertPoints = setInterval(function() {
    document.getElementById("Score").innerHTML = "Score: " + Player.points
  }, 101);
}

//Checking button clicks

if (document.getElementById('Start').clicked == true) {
  Start(); //Start button
}

//Checking crates and if the buttons are pressed

//HERE

if (document.getElementById("OpenCrateA").clicked == true) {
  if (Player.points >= 50) {
    OpenBasicCrate();
    Player.points -= 50;
  } else if (Player.points < 50) {
    document.getElementById("DisplayError").style.display = "block";
    setTimeout(function() {
      document.getElementById("DisplayError").style.display = "none";
    }, 3000);
  }
}

if (document.getElementById("OpenCrateB").clicked == true) {
  if (Player.points >= 125) {
    OpenBetterCrate();
    Player.points -= 125;
  } else if (Player.points < 125) {
    document.getElementById("DisplayError").style.display = "block";
    setTimeout(function() {
      document.getElementById("DisplayError").style.display = "none";
    }, 3000); // Come back here later
  }
}

if (document.getElementById("OpenCrateC").clicked == true) {
  if (Player.points >= 300) {
    OpenAdvancedCrate();
    Player.points -= 300;
  } else if (Player.points < 300) {
    document.getElementById("DisplayError").style.display = "block";
    setTimeout(function() {
      document.getElementById("DisplayError").style.display = "none";
    }, 3000);
  }
}

if (document.getElementById("OpenCrateD").clicked == true) {
  if (Player.points >= 1500) {
    OpenBetterAdvancedCrate();
    Player.points -= 1500;
  } else if (Player.points < 1500) {
    document.getElementById("DisplayError").style.display = "block";
    setTimeout(function() {
      document.getElementById("DisplayError").style.display = "none";
    }, 3000);
  }
}

if (document.getElementById("OpenCrateE").clicked == true) {
  if (Player.points >= 15000) {
    OpenMythicalCrate();
    Player.points -= 15000;
  } else if (Player.points < 15000) {
    document.getElementById("DisplayError").style.display = "block";
    setTimeout(function() {
      document.getElementById("DisplayError").style.display = "none";
    }, 3000);
  }
}

//TO HERE
body {
  background-image: url(https://cdn.discordapp.com/attachments/656847228219949067/855371548860350474/backgroundImage.png);
  height: 500px;
  width: 800px;
  font-family: "Lucida Console", "Courier New", monospace;
}

img {
  position: absolute;
  right: 5px;
  top: 375px;
  width: 150px;
  height: 150px;
  outline: 3px dotted black;
}

.OpenCrateA {
  background-image: url(https://cdn.discordapp.com/attachments/656847228219949067/855379404020121620/backgroundImage.png);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 425px;
  left: 5px;
  outline: 2px solid black;
}

.OpenCrateB {
  background-image: url(https://cdn.discordapp.com/attachments/656847228219949067/855379943093829642/backgroundImage.png);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 425px;
  left: 110px;
  outline: 2px solid black;
}

.OpenCrateC {
  background-image: url(https://cdn.discordapp.com/attachments/656847228219949067/855379735671865344/backgroundImage.png);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 425px;
  left: 215px;
  outline: 2px solid black;
}

.OpenCrateD {
  background-image: url(https://cdn.discordapp.com/attachments/656847228219949067/855380083225526282/backgroundImage.png);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 425px;
  left: 320px;
  outline: 2px solid black;
}

.OpenCrateE {
  background-image: url(https://cdn.discordapp.com/attachments/656847228219949067/855380283788492810/backgroundImage.png);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 425px;
  left: 425px;
  outline: 2px solid black;
}

.Start {
  width: 100;
  height: 30;
  font-family: "Lucida Console", "Courier New", monospace;
  background-color: red;
  outline: 2px solid black;
}

.InstructionMenu {
  background-color: blue;
  outline: 2px solid black
}

h1 {
  font-family: "Lucida Console", "Courier New", monospace;
}

.RankDisplay {
  position: absolute;
  top: 375px;
  background-color: blue;
  outline: 3px solid black;
}
<script src="script.js"></script>

<h1 id="welcomingScreen">Welcome to "A Bad Grinding Game!"</h1>

<button id="StartButton" class="Start" onclick="Start()">Start</button>

<p id="Score"> Score: </p>

<p id="RankDisplay" class="RankDisplay"> Your current rank is: "Begginer Grinder"</p>

<p id="SpecDisplay" class="SpecDisplay"> Your current spec is "Plain"</p>

<h2 id="InstructionsMenu" class="InstructionMenu" style="display:none">Instrutions:</h2>

<p id="InstructionsMenu" class="InstructionMenu" style="display:none"> This is a simple grinding game. You have a "spec", which allows you to gain a specific amount of "points" per a specific amount of time. The longer you grind, the better your rank becomes, and a better rank gives a slight point increase. </p>

<p id="DisplayError" style="display:none"> You do not have enough money to purchase this crate!</p>

<img src="https://cdn.discordapp.com/attachments/656847228219949067/855161969615175680/ABGG_icon.png"></img>

<button type="button" class="OpenCrateA" id="OpenCrateA">Open Crate 1</p>

<button type="button" class="OpenCrateB" id="OpenCrateB">Open Crate 2 </button>

<button type="button" class="OpenCrateC" id="OpenCrateC">Open Crate 3 </button>

<button type="button" class="OpenCrateD" id="OpenCrateD">Open Crate 4 </button>

<button type="button" class="OpenCrateE" id="OpenCrateE">Open Crate 5 </button>

游戏画面

标签： javascripthtml

解决方案

您的按钮激活逻辑不起作用，因为您正在检查 if button.clicked == true。据我所知，按钮 HTML 事件甚至没有clicked属性。

即使他们这样做了，虽然您确实正确地检查了按钮是否被按下，但它只会这样做一次，就在用户第一次加载页面时，因此任何后续按下都将被忽略。

您正在寻找的方法是button.onclick，您可以在此处阅读。有了它，您的代码将类似于：

document.getElementById("OpenCrateA").onclick = function(){
  if (Player.points >= 50){
    OpenBasicCrate();
    Player.points -= 50;
  }
  else if (Player.points < 50){
    document.getElementById("DisplayError").style.display = "block";
    setTimeout(function(){ document.getElementById("DisplayError").style.display = "none"; }, 3000); 
  }
}

这将为按钮的单击事件注册一个侦听器，该事件将在按下按钮时触发并调用您定义的逻辑。

您可能面临的另一个问题是您尝试选择的按钮元素未定义。这是因为您的<script>标签位于 HTML 的顶部，因此它会在您的任何 HTML 被渲染之前运行。我建议将其移至 HTML 的底部<body>

推荐阅读