CODEWITHSUNDEEP
javascripthtmlcss
Thomas Tallman
Thomas Tallman

Reputation: 81

How to make a function that executes when a button is clicked a certain amount of times?

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.

Upvotes: 0

Views: 71

Answers (3)

Evik Ghazarian
Evik Ghazarian

Reputation: 1791

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>

Upvotes: 0

Black Hole
Black Hole

Reputation: 1382

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.

Upvotes: 0

P&#228;rt Johanson
P&#228;rt Johanson

Reputation: 1650

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>

Upvotes: 2

Related Questions