Displaying buttons and printing a variable in javascript

Question

I'm fairly new to JavaScript, but I have some experience in other languages. I've been working on making my own small project, and I'm still figuring out how some things work. I have two problems that I need help solving. The first one, is that I have a button that should appear after you get 100 points, and click the button. This is at the if (buyupgrade == 1) and the following parts of that. I want the button to appear after the conditions are met (buy the first upgrade after getting 100 points). I also want to be printing the text part of a button, but in the text, I need it to display a variable, So my button text will display some words and a variable. Thanks for the help!

<!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>

What is the problem with your code? Are there errors in your browser's console? — Andy G
– Andy G, Commented Jul 30, 2017 at 19:15
@AndyG My code does work, but I'm adding on to it. The button I previously mentioned will not show up and I believe that I probably did something wrong, and I want to be able to print variables in button text (if that makes sense) — Joel Banks
– Joel Banks, Commented Jul 30, 2017 at 19:19
I am getting the second button when the points reach 100. What's supposed to happen? — Mark
– Mark, Commented Jul 30, 2017 at 19:20
@Mark_M oops, sorry for the confusion. If you look later, there should be a third button that is hidden by default, and once the conditions are met, it should appear. — Joel Banks
– Joel Banks, Commented Jul 30, 2017 at 19:27

Mark · Accepted Answer · 2017-07-30 20:08:04Z

2

Your code that is supposed to make the third button visible is by itself outside any function. This seems like a typo:

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

This only gets called the first time through the program when buyupgrade == 0

I think you meant for this to be inside the function:

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

Also, there's a typo:

document.getElementById("firstbuild");

should probably be:

var firstbuild = document.getElementById("firstbuild");

edited Jul 30, 2017 at 20:08

answered Jul 30, 2017 at 19:37

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joel Banks Over a year ago

That fixed that part! Thanks! Do you know how I could print variables in the text part of a button also?

Mark Over a year ago

You can set the innerText of the button with something like: multiply_button.innerText = "Whoa Some Text!" at the same time you change the display

Joel Banks Over a year ago

Could you elaborate on that a bit or provide a link to somewhere I could find this?

Mark Over a year ago

Sure @JoelBanks - see the updated answer. It adds text to the third button when it's displayed. Is that what you're trying to do?

Joel Banks Over a year ago

Yes, thats exactly it! Thank you

Collectives™ on Stack Overflow

Displaying buttons and printing a variable in javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related