Q:

JavaScript with if statements and buttons

I'm very new to JavaScript, but I have some knowledge of c, and a good amount of knowledge about HTML.
My issue in this project is that I want the second button (the one that onclick should run the firstx2 function) to become visible only after the points are 100 or more, and I'm not sure how to go about this. Also need the button to disappear after they click it. Thanks!

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 + "!"
}
<!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>

A:

Ok, here's how you do it:

correct the onclick part of the second button, like others have mentioned
add an id to the second button and add styles to it: display:none; to hide it
make it appear in addPoints (set display:inline;)
regarding disappearing, you may set display:none; back again

the particular implementation below works like you described: the multiply button will appear after each click on the first button when you have >=100 points (I've set initial points to 98 for quicker testing):

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>

If you'd like the second button to be displayed only once, you should make an extra variable, something like multiplier_got_available, set and check it accordingly. Also, it seems that you wanted to add points -= 100 to firstx2.

