Reputation: 31

Limit the amount of times a button is clicked

for my college project im trying to limit the amount of times one of my buttons is being clicked to 3 times, I've been looking everywhere for code to do it and found some yesterday, it does give me alert when I've it the max amount of clicks but the function continues and im not sure why, here is the code I've been using.

var total = 0 
var hitnumber = 0
var username = prompt("Enter username", "Player 1")
var compscore = 18
var card_1 = 0
var card_2 = 0
var ClickCount = 0



function NumberGen() {

    hitnumber = Math.floor((Math.random() * 2) + 1);

    document.getElementById("Random Number").innerHTML = username + " has 
    drawn " + hitnumber;

}



function Total_Number() {

    total = total + hitnumber + card_1 + card_2;

    document.getElementById("Total").innerHTML = username + " has a total 
    of " + total;

    if(total >21){
        window.location="../End_Game/End_Lose_Bust.html";
    }
}

function Random_Number() {

    card_1 = Math.floor((Math.random() * 2) + 1);
    card_2 = Math.floor((Math.random() * 2) + 1);

    document.getElementById("Stcards").innerHTML = username + " has drawn " 
    + card_1 + " and " + card_2 + " as their first cards.";


}




function menuButton(button) {
    switch(button)
    
    {
        
        case "Stick":
        
            if (total > 21) {
            
                window.location="../End_Game/End_Lose_Bust.html";
            
            } else if (total == 21){
              
                window.location="../End_Game/End_Win_21.html";
            
            } else if (total > compscore) {
            
                window.location="../End_Game/End_Win.html";
            
            } else if (total == compscore) {
            
                window.location="../End_Game/End_Draw.html";
            
            } else {
            
                window.location="../End_Game/End_lose.html";
            
            }
        
    }

}

function Hidebutton() {

    document.getElementById("Hit").style.visibility = 'visible';
    document.getElementById("Stick").style.visibility = 'visible';
    document.getElementById("Deal").style.visibility = 'hidden';
}

function countClicks() {
    var clickLimit = 3; 
    if(ClickCount>=clickLimit) {
	    alert("You have drawn the max amount of crads");
	    return false;
    }
    else
    {
	    ClickCount++;
	    return true;
    }
}

HTML

<!doctype html>

<html>

<head>

  <title>Pontoon Game</title>

  <link rel="stylesheet" type="text/css" href="Main_Game.css">

</head>

<body>

  <h1>Pontoon</h1>

  <div id="Control">

    <input type="button" id="Hit" onclick="NumberGen(); Total_Number(); countClicks()" value="Hit" style="visibility: hidden" />

    <input type="button" id="Stick" onclick="menuButton(value)" style="visibility: hidden" value="Stick" />

    <input type="button" id="Deal" onclick="Hidebutton(); Random_Number()" value="Deal" />

  </div>

  <div class="RNG">

    <p id="Stcards"></p>

    <p id="Random Number"></p>

    <p id="Total"></p>

  </div>

  <div class="Rules">

    <p>

      Welcome to Pontoon, the goal of the game is to make your cards reach a combined value of 21 before the dealer (computer). during the game you will have two clickable buttons, these are hit and stick.

    </p>

    <p>

      >Hit - This button allows you to collect another card.

    </p>

    <p>

      >Stick - This buttom allows you to stay at the value of cards you have, you should only use this button at the end of the game when you feel you cannot get any closer to 21 without going bust.

    </p>

    <p>

      Going bust means you have gone over 21, when this happens the game will automaticly end as you have gone bust.

    </p>

  </div>

</body>

</html>

Cheers in advance.

Upvotes: 3

Answers (2)

Nisal Edu

Reputation: 7591

Try this

var count = 0;
function myfns(){
count++;
console.log(count);
if (count>3){
document.getElementById("btn").disabled = true;
alert("You can only click this button 3 times !!!");

}


}

<button id="btn" onclick="myfns()">Click Me</button>

I have edited your code also following is your code

var total = 0
var hitnumber = 0
var username = prompt("Enter username", "Player 1")
var compscore = 18
var card_1 = 0
var card_2 = 0
var ClickCount = 0



function NumberGen() {

  hitnumber = Math.floor((Math.random() * 2) + 1);

  document.getElementById("Random Number").innerHTML = username + " has drawn " + hitnumber;

}



function Total_Number() {

  total = total + hitnumber + card_1 + card_2;

  document.getElementById("Total").innerHTML = username + " has a total  of " + total;

  if (total > 21) {
    window.location = "../End_Game/End_Lose_Bust.html";
  }
}

function Random_Number() {

  card_1 = Math.floor((Math.random() * 2) + 1);
  card_2 = Math.floor((Math.random() * 2) + 1);

  document.getElementById("Stcards").innerHTML = username + " has drawn " +
    card_1 + " and " + card_2 + " as their first cards.";


}




function menuButton(button) {
  switch (button)

  {

    case "Stick":

      if (total > 21) {

        window.location = "../End_Game/End_Lose_Bust.html";

      } else if (total == 21) {

        window.location = "../End_Game/End_Win_21.html";

      } else if (total > compscore) {

        window.location = "../End_Game/End_Win.html";

      } else if (total == compscore) {

        window.location = "../End_Game/End_Draw.html";

      } else {

        window.location = "../End_Game/End_lose.html";

      }

  }

}

function Hidebutton() {

  document.getElementById("Hit").style.visibility = 'visible';
  document.getElementById("Stick").style.visibility = 'visible';
  document.getElementById("Deal").style.visibility = 'hidden';
}

function countClicks() {
  var clickLimit = 3;
  if (ClickCount >= clickLimit) {
    alert("You have drawn the max amount of crads");
    return false;
  } else {
    NumberGen();
    Total_Number();
    ClickCount++;
    return true;
  }
}

<html>

<head>

  <title>Pontoon Game</title>

  <link rel="stylesheet" type="text/css" href="Main_Game.css">

</head>

<body>

  <h1>Pontoon</h1>

  <div id="Control">

    <input type="button" id="Hit" onclick=" countClicks()" value="Hit" style="visibility: hidden" />

    <input type="button" id="Stick" onclick="menuButton(value)" style="visibility: hidden" value="Stick" />

    <input type="button" id="Deal" onclick="Hidebutton(); Random_Number()" value="Deal" />

  </div>

  <div class="RNG">

    <p id="Stcards"></p>

    <p id="Random Number"></p>

    <p id="Total"></p>

  </div>

  <div class="Rules">

    <p>

      Welcome to Pontoon, the goal of the game is to make your cards reach a combined value of 21 before the dealer (computer). during the game you will have two clickable buttons, these are hit and stick.

    </p>

    <p>

      >Hit - This button allows you to collect another card.

    </p>

    <p>

      >Stick - This buttom allows you to stay at the value of cards you have, you should only use this button at the end of the game when you feel you cannot get any closer to 21 without going bust.

    </p>

    <p>

      Going bust means you have gone over 21, when this happens the game will automaticly end as you have gone bust.

    </p>

  </div>

</body>

</html>

Upvotes: 0

Lajos Arpad

Reputation: 76508

You are calling countClicks at the end of onclick. Change it to this:

if (countClicks()) { NumberGen(); Total_Number();}

Upvotes: 1

Limit the amount of times a button is clicked

Answers (2)

Related Questions