限制单击按钮的次数

时间:2017-11-27 09:50:07

标签: javascript html

对于我的大学项目,我试图限制我的一个按钮点击次数达到3次,我一直在寻找代码来做到这一点并在昨天发现一些,它确实让我警觉,当我'它是最大的点击量,但功能仍在继续,我不知道为什么,这是我一直在使用的代码。

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>

提前干杯。

1 个答案:

答案 0 :(得分:0)

试试这个

&#13;
&#13;
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 !!!");

}


}
&#13;
<button id="btn" onclick="myfns()">Click Me</button>
&#13;
&#13;
&#13;

我已经编辑了你的代码以下是你的代码

&#13;
&#13;
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;
  }
}
&#13;
<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>
&#13;
&#13;
&#13;