Button does nothing when pressed
Question
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>
3 answers
solution1
0 ACCPTED 2017-07-31 01:00:37
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>
solution2
0 2017-07-31 01:04:17
I think you should check your button(secondbuild)
the keyword onclick is wrong
solution3
0 2017-07-31 01:09:04
Spelling Mistake. onclick not oncilck.
<button id="secondbuild" onlcick="build2()" style="display:none;">Building 2. Cost x</button> <script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why does the page reload when the button is pressed
My button does nothing when i click on it
Button for modal does nothing when clicked
Validation Does not work when enter button is pressed but works on clicking the button
Displaying list when a button is pressed. error "nothing was returned from render"
Clicking button does nothing
Button does nothing on click
Button does nothing?
submit button does nothing
Submit button does nothing
Related Tags