javascript - 限制点击按钮的次数

标签 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>

提前干杯。

最佳答案

您在 onclick 结束时调用了 countClicks。将其更改为:

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

关于javascript - 限制点击按钮的次数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47508002/

相关文章:

javascript - React.createClass 不是一个函数,可能是 webpack 编译错误

html - 如果大于 1px,html 中的重复背景是否更有效?

html - 对齐 p :inputText with labels

html - HTML 中的自动换行

html - 将 child 的宽度设置为 parent 的宽度,包括边框

php - 为什么 jQuery.parseJSON 不接受换行符?

javascript - 实习生功能测试中的多个 THEN 语句

javascript - 创建类似 jQuery 风格的库

javascript - 无法在 Bootstrap 框架中打开可折叠菜单

html - 修复显示 View : table property