在javascript中显示按钮并打印变量

时间:2017-07-30 19:12:33

标签: javascript html css

我对JavaScript很新,但我在其他语言方面有一些经验。我一直在努力制作自己的小项目,而且我还在弄清楚一些事情是如何起作用的。我有两个问题需要帮助解决。第一个是,我有一个按钮,在你得到100分后会出现,然后点击按钮。这是在if(buyupgrade == 1)及其后续部分。我想在条件满足后出现按钮(获得100分后购买第一次升级)。我也想打印一个按钮的文本部分,但在文本中,我需要它来显示一个变量,所以我的按钮文本将显示一些单词和一个变量。谢谢你的帮助!

<!DOCTYPE html>
<html>
<body>

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

<button onclick="addPoints()">Add points</button>

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

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

var points = 98;
var pointMulti = 1;
var buyupgrade = 0;
var currentpoints = setInterval(pointupdate, 1000);
function addPoints() {
    points += pointMulti;
    var pointsArea = document.getElementById("pointdisplay");
    pointsArea.innerHTML = "You have " + points + " points!";
        if(points >= 100 && buyupgrade == 0) {
        var multiply_button = document.getElementById("btn_multiply");
        multiply_button.style.display = "inline";
    }
}

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";
  }
}

if (buyupgrade == 1) {
  document.getElementById("firstbuild");
  firstbuild.style.display = "inline";
  function build1() {

  }
}
function pointupdate() {
  document.getElementById("pointdisplay").innerHTML = "You have " + points + " points!";
}
</script>

<p id="pointdisplay"></p>
<p id="multidisplay"></p>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

应该使第三个按钮可见的代码本身在任何函数之外。这似乎是一个错字:

int locationMode = Settings.Secure.getInt(this.getContentResolver(), Settings.Secure.LOCATION_MODE, Settings.Secure.LOCATION_MODE_HIGH_ACCURACY);

仅在if (buyupgrade == 1) { document.getElementById("firstbuild"); firstbuild.style.display = "inline"; function build1() { }

时第一次通过该程序调用

我认为你的意思是在函数内部:

buyupgrade == 0

此外,还有一个错字:

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";
    }

    if (buyupgrade == 1) {
        var firstbuild = document.getElementById("firstbuild");
        firstbuild.style.display = "inline";

        // add some text to the button
        firstbuild.innerText = "buyupgrade: " + buyupgrade
    }
}

应该是:

document.getElementById("firstbuild");