JavaScript按钮未运行功能或点击后消失

Question

编辑：问题是一个错字，这应该被捕获，并不是一个好问题。对于那个很抱歉

所以我一直在努力用JS制作我自己的一个项目，它涉及很多按钮。我有一个按钮（ID为“firstbuildmulti1”的那个），它应该运行“build1multi1”函数但我不认为它是这样做的。我多次查看它，我不确定为什么它不起作用。任何帮助表示赞赏！ （旁注：按钮仅在您单击第三个构建按钮后出现，这是有意的）。编辑：我在这里运行代码，它说：{“message”：“未捕获的ReferenceError：b1m1cost未定义”，“文件名”：“https://stacksnippets.net/js”，“lineno”：183，“colno”：17}

我的代码是：

  //declare variables for points, multiplier, buy upgrade, b1 2 and 3 cost and count, make point updater
var points = 9999;
var pointMulti = 1;
var buyupgrade = 0;
var b1cost = 200;
var b1count = 0;
var b2cost = 1000;
var b2count = 0;
var b3cost  = 2000;
var b3count = 0;
var b1m1cost = 1500;
var currentpoints = setInterval(pointupdate, 500);

//clicking on main button to add points
function addPoints() {
    points += pointMulti;
    var pointsArea = document.getElementById("pointdisplay");
    pointsArea.innerHTML = "You have " + Math.round(points) + " points!";
        if(points >= 100 && buyupgrade == 0) {
        var multiply_button = document.getElementById("btn_multiply");
        multiply_button.style.display = "inline";
        console.log();
    }
}

//make logic for doubling addpoints
function firstx2() {
  if (buyupgrade == 0) {
    pointMulti *= 2;
    buyupgrade++;
    points -= 100;
    var multiplierArea = document.getElementById("multidisplay");
    multiplierArea.innerHTML = "Your multiplier is: " + pointMulti;
    var multiply_button = document.getElementById("btn_multiply");
    multiply_button.style.display = "none";

  //logic for displaying first building upgrade
  if (buyupgrade == 1) {
    var firstbuild = document.getElementById("firstbuild");
    firstbuild.style.display = "inline";
    firstbuild.innerText = "Building 1. Cost " + b1cost;

    var show2ndx2 = document.getElementById("secondx2");
    multiply2.style.display = "inline";
  }

  }
}

//displays total points
function pointupdate() {
  document.getElementById("pointdisplay").innerHTML = "You have " + Math.round(points) + " points!";
}

//what happens when you click first building button
function build1() {
  if (points >= b1cost) {
    points -= b1cost;
    b1count++;
    b1cost *= 1.10;
    var b1multi = 1;
    var b1pps = b1count * b1multi;
    document.getElementById("b1").innerHTML = "You have " + b1count + " of building 1! Making " + b1pps + " points per second."
    firstbuild.innerText = "Building 1. Cost " + Math.round(b1cost);
    var build1add = setInterval(build1points, 1000);

    //display second building
    var secondbuild = document.getElementById("secondbuild");
    secondbuild.style.display = "inline";
    secondbuild.innerText = "Building 2. Cost " + b2cost;

  }
}

//what happens when you click second building button
function build2() {
  if (points >= b2cost) {
    points -= b2cost;
    b2count++;
    b2cost *= 1.10;
    var b2multi = 1;
    var b2pps = (b2count * 4) * b2multi;
    document.getElementById("b2").innerHTML = "You have " + b2count + " of building 2! Making " + b2pps + " points per second."
    secondbuild.innerText = "Building 2. Cost " + Math.round(b2cost);
    var build2add = setInterval(build2points, 1000);

    //display third building
    var thirdbuild = document.getElementById("thirdbuild");
    thirdbuild.style.display = "inline";
    thirdbuild.innerText = "Building 3. Cost " + b3cost;
  }
}

//what happens when you click third building button
function build3() {
  if (points >= b3cost) {
    points -= b3cost;
    b3count++;
    b3cost *= 1.10;
    var b3multi = 1;
    var b3pps = (b3count * 10) * b3multi;
    document.getElementById("b3").innerHTML = "You have " + b3count + " of building 3! Making " + b3pps + " points per second."
    thirdbuild.innerText = "Building 3. Cost " + Math.round(b3cost);
    var build3add = setInterval(build3points, 1000);

    //first building first multiplier
    var firstbuildmulti1 = document.getElementById("firstbuildmulti1");
    firstbuildmulti1.style.display = "inline";
    firstbuildmulti1.innerText = "Building 1 x2 multiplier. Cost: " + b1m1cost + "."
  }
}

//add points for build1
function build1points() {
  points += 1;
}

//add points for build2
function build2points() {
  points += 4;
}

//add points for build3
function build3points() {
  points += 10;
}

//second x2, display multiplier
function secondx2() {
  if (buyupgrade == 1 && points >= 1000) {
    pointMulti *= 2;
    points -= 1000;
    document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + pointMulti;
    multiply2.style.display = "none";
  }
}

function build1multi1() {
  if (points >= b1m1cost) {
    points -= b1m1cost;
    b1multi *= 2;
    var build1multi1 = document.getElementById("build1multi1");
    build1multi1.style.display = "none";
  }
}

<p>Click to get started!</p>

<!--Link to all CSS files -->
<link rel="stylesheet" href="buttons.css">
<link rel="stylesheet" href="displayscores.css">
<link rel="stylesheet" href="layout.css">

<!-- make all buttons -->
<button id="addpoints" onclick="addPoints()" background-color:red>Add points</button>

<button id="firstbuild" onclick="build1()" style="display:none;">Building 1. Cost x</button>

<button id="secondbuild" onclick="build2()" style="display:none;">Building 2. Cost x</button>

<button id="thirdbuild" onclick="build3()" style="display:none;">Building 3. Cost x</button>

<br>
<p><b>Upgrades:</b></p>

<button id="btn_multiply" onclick="firstx2()" style="display:none;">x2 Multiplier. Cost: 100</button>

<button id="multiply2" onclick="secondx2()" style="display:none;">x2 Multiplier. Cost: 1000</button>

<button id="firstbuildmulti1" onclick="build1multi1()" style="display:none;">Building 1 x2 multiplier. Cost x</button>

<!-- make a div around all paragraphs displaying stats and display them -->
<div class="displayscores">
  <p id="pointdisplay"></p>
  <p id="multidisplay"></p>
  <p id="b1"></p>
  <p id="b2"></p>
  <p id="b3"></p>
</div>

Answer 1

首先，正如评论中所讨论的那样，只要你遇到代码，你就可以尝试使用console.log()（如果你是新手，请研究一下使用Console进行调试）

function build1multi1() {
  console.log("Entered function"); //If this is printed in console, that means the function is called
  if (points >= b1m1cost) {
    console.log("Entered condition"); //If this is not printed in console, it means condition points >= b1m1cost fails.
    // console.log(b1m1cost); // You can check b1m1cost value in the console
    // console.log(points); // You can check points value in the console
    points -= b1m1cost;
    b1multi *= 2;
    var build1multi1 = document.getElementById("build1multi1");
    build1multi1.style.display = "none";
  }
}

问题1：没有定义b1m1cost

b1m1cost未在全球范围内定义。它仅在其中一个函数中声明。因此，build1multi1()内部的条件必定是失败的。

问题2：无法读取null的属性style（不隐藏按钮）

这发生在build1multi1()函数内部。 这意味着var build1multi1在这个功能中是null。 这意味着document.getElementById("build1multi1");无法找到id为build1multi1的任何元素。 如果你想隐藏按钮，那么id应该是firstbuildmulti1，它是按钮的id。所以，把它改成document.getElementById("firstbuildmulti1");