How to make a function that executes when a button is clicked a certain amount of times?
Question
i made two buttons which one says "by one" and the other says "by two". I want to make it so that when you click the by one button around 50 times then the second button will work.
let number = 0; function increase() { for (var i = 0; i < 1; i++) { document.getElementById("number").innerHTML = number += 1; } } if (number = 50) {function double() { for (var i = 0; i < 2; i++) { document.getElementById("number").innerHTML = number += 1; } } }
.button1border { border: black 3px solid; margin: 10px 1280px 0px 0px; width: 60px; }
<!DOCTYPE="html"> <html> <link rel="stylesheet" type="text/css" href="/style.css"> <button type="button" onclick="increase()"> by 1 </button> <button onclick="double()"> by 2 </button> <div class="button1border"> number: <div id="number"> </div> </div> <script src="script.js" type="text/javascript"></script> </html>
When you click on the second button, the number instantly goes to 50, instead of the button not working. Can someone try to fix this so that when the number hits 50 (50 clicks) then the second button works? If the number is below 50 then the second button shouldn't work.
3 answers
solution1
2 ACCPTED 2019-03-11 15:16:25
Indentation is your friend, also, your functions are callbacks, they only execute when an event is triggered on an element that they are bound to
let number = 0; function increase() { document.getElementById("number").innerHTML = number += 1; } function double() { if (number >= 50) { for (var i = 0; i < 2; i++) { increase(); } } }
.button1border { border: black 3px solid; margin: 10px 1280px 0px 0px; width: 60px; }
<!DOCTYPE="html"> <html> <link rel="stylesheet" type="text/css" href="/style.css"> <button type="button" onclick="increase()"> by 1 </button> <button onclick="double()"> by 2 </button> <div class="button1border"> number: <div id="number"> </div> </div> <script src="script.js" type="text/javascript"></script> </html>
solution2
0 2019-03-11 15:17:25
you can target the second button and the buttons elements have the property disabled . So when you increase, you check if your number is >= 50 and disable it disable = false
let number = 0; function increase() { for (var i = 0; i < 1; i++) { document.getElementById("number").innerHTML = number += 1; } } if (number = 50) {function double() { for (var i = 0; i < 2; i++) { document.getElementById("number").innerHTML = number += 1; } } }
<!DOCTYPE="html"> <html> <link rel="stylesheet" type="text/css" href="/style.css"> <button type="button" onclick="increase()"> by 1 </button> <button onclick="double()"> by 2 </button> <div class="button1border"> number: <div id="number"> </div> </div> <script src="script.js" type="text/javascript"></script> </html>
var number = 0; let btnTwo = document.getElementById("btnTwo"); function increase() { for (var i = 0; i < 1; i++) { document.getElementById("number").innerHTML = number += 1; } if(number >= 50){ btnTwo.disabled = false; } } if (number == 50) {function double() { for (var i = 0; i < 2; i++) { document.getElementById("number").innerHTML = number += 1; } } }
.button1border { border: black 3px solid; margin: 10px 1280px 0px 0px; width: 60px; }
<!DOCTYPE="html"> <html> <link rel="stylesheet" type="text/css" href="/style.css"> <button type="button" onclick="increase()"> by 1 </button> <button id="btnTwo" onclick="double()" disabled> by 2 </button> <div class="button1border"> number: <div id="number"> </div> </div> <script src="script.js" type="text/javascript"></script> </html>
something like tihs.
solution3
0 2019-03-11 15:36:45
You really don't need a for loop in here.
let number = 0; function increase() { if (number <= 50) { document.getElementById("number").innerHTML = number += 1; } } function double() { if (number > 50) { document.getElementById("number").innerHTML = number += 2; } }
.button1border { border: black 3px solid; margin: 10px 1280px 0px 0px; width: 60px; }
<!DOCTYPE="html"> <html> <link rel="stylesheet" type="text/css" href="/style.css"> <button type="button" onclick="increase()"> by 1 </button> <button onclick="double()"> by 2 </button> <div class="button1border"> number: <div id="number"> </div> </div> <script src="script.js" type="text/javascript"></script> </html>
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.