Question

我对JavaScript很陌生，但我对c有一些了解，并且对HTML有很多知识。

我在这个项目中的问题是我希望第二个按钮（onclick应该运行firstx2功能的按钮）只有在点数为100或更多之后才能看到，我不确定如何解决这个问题。还需要按钮在单击后消失。谢谢！

＆＃13;

var points = 0;
var pointMulti = 1;
function addPoints() {
    points = points + pointMulti;
    document.getElementById("pointdisplay").innerHTML = "You have " + points 
        + " points!";
}
function firstx2() {
    pointMulti *= 2;
    document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + 
        pointMulti + "!"
}

＆＃13;

<!DOCTYPE html>
<html>
    <body>
        <p>Click to get started!</p>
        <button onclick="addPoints()">Add points</button>
        <button onclick="firstx2">x2 Multiplier. Cost: 100</button>
        <p id="pointdisplay"></p>
        <p id="multidisplay"></p>
    </body>
</html>

＆＃13;

Answer 1

您没有正确调用此功能。

将onclick="firstx2"更改为onclick="firstx2()"

另外，在购买x2乘数时，对分数减少100的逻辑进行了少量编辑。

但主要问题是调用函数。

var points = 0;
var pointMulti = 1;

function addPoints() {
  points = points + pointMulti;
  document.getElementById("pointdisplay").innerHTML = "You have " + points +
    " points!";
}

function firstx2() {
  if (points >= 10) {
    pointMulti = pointMulti * 2;
    points = points - 10;
    document.getElementById("pointdisplay").innerHTML = "You have " + points +
      " points!";
    document.getElementById("multidisplay").innerHTML = "Your multiplier is: " +
      pointMulti + "!";
  }
}

<p>Click to get started!</p>
<button onclick="addPoints()">Add points</button>
<button onclick="firstx2()">x2 Multiplier. Cost: 100</button>

<p id="pointdisplay"></p>
<p id="multidisplay"></p>

Answer 2

首先，改变

<button onclick="firstx2">x2 Multiplier. Cost: 100</button>

到

<button onclick="firstx2()">x2 Multiplier. Cost: 100</button>

您需要括号。其次，这应该工作（用这个替换你的firstx2函数）

function firstx2(){
    if(points >= 100){
        pointMulti *= 2;
        document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + pointMulti + "!";
        document.getElementById("pointdisplay").innerHTML = "You have " + points;
        points -= 100;
    }
}

Answer 3

好的，这是你如何做到的：

更正第二个按钮的onclick部分，就像其他人提到的那样
在第二个按钮上添加一个ID并为其添加样式：display:none;隐藏它
使其显示在addPoints（设置display:inline;）
关于消失，您可以再次设置display:none;

下面的特定实现与您描述的一样：当您有> = 100分时，每次点击第一个按钮后会出现乘法按钮（我将初始点设置为98以便更快地进行测试）：

var points = 98;
var pointMulti = 1;
function addPoints() {
    points += pointMulti;
    var pointsArea = document.getElementById("pointdisplay");
    pointsArea.innerHTML = "You have " + points + " points!";
    if(points >= 100) {
        var multiply_button = document.getElementById("btn_multiply");
        multiply_button.style.display = "inline";
    }
}
function firstx2() {
    pointMulti *= 2;
    var multiplierArea = document.getElementById("multidisplay");
    multiplierArea.innerHTML = "Your multiplier is: " + pointMulti + "!";
    var multiply_button = document.getElementById("btn_multiply");
    multiply_button.style.display = "none";
}

<!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>
        <p id="pointdisplay"></p>
        <p id="multidisplay"></p>
    </body>
</html>

如果您希望第二个按钮只显示一次，您应该创建一个额外的变量，例如multiplier_got_available，并进行相应的检查。此外，您似乎希望将points -= 100添加到firstx2。

带有if语句和按钮的JavaScript

3 个答案: