CODEWITHSUNDEEP
javascript
Joel Banks
Joel Banks

Reputation: 149

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>

Upvotes: 1

Views: 1194

Answers (3)

YakovL
YakovL

Reputation: 8347

Ok, here's how you do it:

  1. correct the onclick part of the second button, like others have mentioned
  2. add an id to the second button and add styles to it: display:none; to hide it
  3. make it appear in addPoints (set display:inline;)
  4. 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.

Upvotes: 0

anvita surapaneni
anvita surapaneni

Reputation: 369

You did not call the function properly.

changed onclick="firstx2" to onclick="firstx2()"

Also Added few edits to the logic where the score reduces by 100 when you purchase x2 Multiplier.

But the main problem was calling the function.

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>

Upvotes: 1

Mr DOOD
Mr DOOD

Reputation: 61

First, change

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

to

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

You need the parenthesis. Second, this should work (replace your firstx2 function with this)

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

Upvotes: 0

Related Questions