Q:

Button does nothing when pressed

I've been working on my own project for a little bit, and I'm currently working on adding another button in. Now I've set it up pretty similar to the other ones, but it isn't working when I press it. For my code, the firstx2, secondx2, and first building buttons all work fine, But when you try and click on the second building button, it doesn't do anything. I probably made a small typo or missed a line, but I can't seem to find it anywhere. To get to the second building button, you have to have already clicked on both multipliers and the first building. Thanks for your 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 x</button>

<button id="multiply2" onclick="secondx2()" style="display:none;">x2 Multiplier. Cost: 1000</button>

<button id="secondbuild" onlcick="build2()" style="display:none;">Building 2. Cost x</button>
<script>

var points = 10099;
var pointMulti = 1;
var buyupgrade = 0;
var b1cost = 200;
var b1count = 0;
var b2cost = 1000;
var b2count = 0;
var currentpoints = setInterval(pointupdate, 500);

function addPoints() {
    points += pointMulti;
    var pointsArea = document.getElementById("pointdisplay");
    pointsArea.innerHTML = "You have " + Math.round(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) {
    var firstbuild = document.getElementById("firstbuild");
    firstbuild.style.display = "inline";
    firstbuild.innerText = "Building 1. Cost " + b1cost;
    
    var show2ndx2 = document.getElementById("secondx2");
    multiply2.style.display = "inline";
}

  }
}

function pointupdate() {
  document.getElementById("pointdisplay").innerHTML = "You have " + Math.round(points) + " points!";
}

function build1() {
  if (points >= b1cost) {
    points -= b1cost;
    b1count++;
    b1cost *= 1.10;
    document.getElementById("b1").innerHTML = "You have " + b1count + " of building 1!"
    firstbuild.innerText = "Building 1. Cost " + Math.round(b1cost);
    var build1add = setInterval(build1points, 1000);
    var secondbuild = document.getElementById("secondbuild");
    secondbuild.style.display = "inline";
    secondbuild.innerText = "Building 2. Cost " + b2cost;
    
  }
}

function build2() {
  if (points >= b2cost) {
    points -= b2cost;
    b2count++;
    b2cost *= 1.10;
    document.getElementById("b2").innerHTML = "You have " + b2count + " of building 2!"
    secondbuild.innerText = "Building 2. Cost " + Math.round(b2cost);
    var build2add = setInterval(build2points, 1000);
  }
}

function build1points() {
  points += 1;
}

function build2points() {
  points += 4;
}

function secondx2() {
  if (buyupgrade == 1 && points >= 1000) {
    pointMulti *= 2;
    points -= 1000;
    document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + pointMulti;
    multiply2.style.display = "none";
  }
}
</script>

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

A:

it should be onclick not onlcick in <button id="secondbuild" onlcick="build2()" style="display:none;">Building 2. Cost x</button>

    <!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 x</button>

<button id="multiply2" onclick="secondx2()" style="display:none;">x2 Multiplier. Cost: 1000</button>

<button id="secondbuild" onclick="build2()" style="display:none;">Building 2. Cost x</button>
<script>

var points = 10099;
var pointMulti = 1;
var buyupgrade = 0;
var b1cost = 200;
var b1count = 0;
var b2cost = 1000;
var b2count = 0;
var currentpoints = setInterval(pointupdate, 500);

function addPoints() {
    points += pointMulti;
    var pointsArea = document.getElementById("pointdisplay");
    pointsArea.innerHTML = "You have " + Math.round(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) {
    var firstbuild = document.getElementById("firstbuild");
    firstbuild.style.display = "inline";
    firstbuild.innerText = "Building 1. Cost " + b1cost;
    
    var show2ndx2 = document.getElementById("secondx2");
    multiply2.style.display = "inline";
}

  }
}

function pointupdate() {
  document.getElementById("pointdisplay").innerHTML = "You have " + Math.round(points) + " points!";
}

function build1() {
  if (points >= b1cost) {
    points -= b1cost;
    b1count++;
    b1cost *= 1.10;
    document.getElementById("b1").innerHTML = "You have " + b1count + " of building 1!"
    firstbuild.innerText = "Building 1. Cost " + Math.round(b1cost);
    var build1add = setInterval(build1points, 1000);
    var secondbuild = document.getElementById("secondbuild");
    secondbuild.style.display = "inline";
    secondbuild.innerText = "Building 2. Cost " + b2cost;
    
  }
}

function build2() {
  if (points >= b2cost) {
    points -= b2cost;
    b2count++;
    b2cost *= 1.10;
    document.getElementById("b2").innerHTML = "You have " + b2count + " of building 2!"
    secondbuild.innerText = "Building 2. Cost " + Math.round(b2cost);
    var build2add = setInterval(build2points, 1000);
  }
}

function build1points() {
  points += 1;
}

function build2points() {
  points += 4;
}

function secondx2() {
  if (buyupgrade == 1 && points >= 1000) {
    pointMulti *= 2;
    points -= 1000;
    document.getElementById("multidisplay").innerHTML = "Your multiplier is: " + pointMulti;
    multiply2.style.display = "none";
  }
}
</script>

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

