javascript - 按下一次按钮后如何灰显和禁用按钮？-6ren

javascript - 按下一次按钮后如何灰显和禁用按钮？

转载作者：行者123 更新时间：2023-12-03 16:47:30

嗨，我试图在按下一次按钮后灰显并禁用一个按钮(div 中的每个按钮)。这样用户将无法再次按下它，直到他/她刷新页面。希望我的问题是正确的提问方式。我希望你能理解我。
这是我的 HTML 页面代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
     <head>
            <!--this name will be visible on the tab-->
           <title>Multiplayer</title>
           <!--this is to link HTML and CSS together-->
             <link rel="stylesheet" type="text/css" href="Hangman.css">
             <script> var currentPlayingWord = "<?php echo $result["word"] ?>" </script>
             <script src="jquery-1.11.3.js"></script>
             <script src="JSforMultiPlayer.js"></script>

     </head>
     <body style="background-color:#00FFFF">
          <!--this is the picture on the webpage-->
          <img id="hangman-image" src="hangmanImage.png" alt="Hangman" style="width:660px;height:618px;" align="right">
          <!--these are the buttons which use to input the words in-->
          <div id="all-the-buttons">
             <div id="first-row" class="row-button">
                   <button type="button">Q</button>
                   <button type="button">W</button>
                   <button type="button">E</button>
                   <button type="button">R</button>
                   <button type="button">T</button>
                   <button type="button">Y</button>
                   <button type="button">U</button>
                   <button type="button">I</button>
                   <button type="button">O</button>
                   <button type="button">P</button>
             </div>
             <div id="second-row" class="row-button" >
                   <button type="button">A</button>
                   <button type="button">S</button>
                   <button type="button">D</button>
                   <button type="button">F</button>
                   <button type="button">G</button>
                   <button type="button">H</button>
                   <button type="button">J</button>
                   <button type="button">K</button>
                   <button type="button">L</button>
            </div>
            <div id="third-row" class="row-button" style="padding-top: 4px;">
                   <button type="button">Z</button>
                   <button type="button">X</button>
                   <button type="button">C</button>
                   <button type="button">V</button>
                   <button type="button">B</button>
                   <button type="button">N</button>
                   <button type="button">M</button>
                   <button id="reset-button" type="button">RESET</button>
            </div>
              <p class="mylives" type="text"></p>
         </div>
          <form>
               <input type="text" id="word-outcome"/>
        </form>
         <form>
               <input type="text" id="wrong-guesses"/>
           </form>
         <form>
             <input type="text" class="hint" style="display:none;" value="Hint: word is computer related." readonly></input>
        </form>
         <TABLE BORDER="5"    WIDTH="20%"   CELLPADDING="5" CELLSPACING="2" id="Score-Board">
          <TR>
              <caption id="table-title">Score Board</caption>
              </TH>
          </TR>
          <TR ALIGN="CENTER">
              <TH colspan="2" id="player1"></TH>
              <TH colspan="2" id="player2"></TH>
          </TR>
          <TR ALIGN="CENTER">
              <TH colspan="2" id="player1Score"></TH>
              <TH colspan="2" id="player2Score"> </TH>
          </TR>
         </TABLE>
     </body>

这是我的 JavaScript 代码:

var wordbank = ['browser', 'binary', 'cache', 'cookie', 'CSS', 'HTML', 'javascript', 'gigabyte', 'google', 'download']
var underscores = "";
var guessCounter = 0;
var score = 1000;
var player1Name;
var player2Name;
$(document).ready(function () {

    getPlayerNames();
    underscores = wordloop(currentPlayingWord);
    wordOutCome(underscores);
    guessCounter = 10;

    $('#all-the-buttons button').click(function () {
        letterPress($(this));
    });


});

var wordloop = function (word) {
    var wordcount = 0
    var underscores = "";
    while (wordcount < word.length) {
        underscores = underscores + "_";
        wordcount++;
    }
    return underscores;
}

var randomNumber = function () {
    var random = Math.floor((Math.random() * 9) + 0);
    return random;
}

var wordOutCome = function (underscores) {
    var wordoutcome = document.getElementById('word-outcome');
    wordoutcome.value = underscores;
}

function letterPress(button) {
    var text = button.text();
    if ("RESET" === text) {
        resetButton();
    }
    else {
        var result = isLetterInWord(text, currentPlayingWord);
        if (result == true) {
            increaseScore();
            replaceDashesForLetter(text);
            var hasDashes = noMoreDashes();
            if (hasDashes == true) {
                navigateToWinnerPage();
            }

        }
        else {
            decreaseGuessCount();
            decreaseScore();
            noMoreGuesses();
            addIncorrectGuessToWrongGuesses(text);
            noMoreLives();
        }


        $('#word-outcome').val(underscores);

    }
}

function isLetterInWord(guess, word) {
    var uppercaseGuess = guess.toUpperCase();
    var uppercaseWord = word.toUpperCase();
    for (var i = 0; i < uppercaseWord.length; i++) {
        console.log(i);
        if (uppercaseWord[i] === uppercaseGuess) {
            return true;
        }
        //get letter from word
        //is letter from word the same as guess
        //if letter from word is the same as guess return true
        //return false if guess is not in the word
    }
    return false;
}

function replaceDashesForLetter(letter) {
    for (var i = 0; i < currentPlayingWord.length; i++) {
        console.log(currentPlayingWord);
        var playingLetter = currentPlayingWord[i];
        var upperCaseCurrentLetter = playingLetter.toUpperCase();
        if (upperCaseCurrentLetter == letter) {
            underscores = setCharAt(underscores, i, letter);
        }
    }
//for each letter in current word being played
//does letter guessed match the letter in the current word
//if letter guessed matches the letter in the current word - then replace the dash at the index (count in loop) with the letter guessed
//for each of the letters in the word being played there is a dash
//if the letter is at the index of a dash then replace that dash with the letter (which is the users guess)
}

function setCharAt(str, index, chr) {
    //get first part of word up to character we want to replace
    var first = str.substr(0, index);
    //get second part of word ONE letter AFTER character we want to replace
    var second = str.substr(index + 1);
    //result is the first part plus the character to replace plus the second part
    return first + chr + second;
}

var addIncorrectGuessToWrongGuesses = function (guess) {
    var currentText = document.getElementById("wrong-guesses").value;
    document.getElementById("wrong-guesses").value = currentText + guess;
    //As the guess is wrong
    //add the guess to the list of incorrect guesses displayed on the screen
}

var greyOutButton = function (button) {
    //grey out the button
    //make sure that the user cannot press the button anymore
}

function resetButton() {
    location.href = "HangmanHomePage.php";
    //Send user to the home page
}

var decreaseGuessCount = function () {
    guessCounter = guessCounter - 1;
    if (guessCounter === 3) {
        showHint();
    }
//guess count should be decreased by one
}

var noMoreGuesses = function () {
    if (guessCounter === 0) {
        location.href = "Looser Page.php";
    }
    //do something when no more guesses (navigate to loser page)
}

var noMoreDashes = function () {
    var i = underscores.indexOf("_");
    if (i > -1) {
        return false;
    }
    return true;
    //if index of '_' is not -1 then there are dashes
}

var navigateToWinnerPage = function () {
    location.href = "Winner Page.php?score="+score;
}

var noMoreLives = function () {
    var showLives = "You have " + guessCounter + " lives";
    var test = document.getElementsByClassName("mylives");
    test.textContent = showLives;
}

function showHint() {
    document.getElementsByClassName('hint').style.display = "block";
}
function increaseScore(){
    score = score + 100;
    console.log(score);
    var showScore = $("#player1Score");
    showScore.text(score);
}
function decreaseScore(){
    score = score - 100;
    console.log(score);
    var showScore = $("#player1Score");
    showScore.text(score);
}

function navigateToDifficultyForMultiPlayer() {
    //set player names in session
    setPlayerNames();
    //navigate to DifficultyForMultiPlayer page
    location.href = "DifficultyForMultiPlayer.html";
}

function setPlayerNames() {
    var firstPlayerName = document.getElementById("playerOneName").value;
    var secondPlayerName = document.getElementById("playerTwoName").value;
    console.log(firstPlayerName + " " + secondPlayerName);
    sessionStorage.setItem("Player1Name", firstPlayerName);
    sessionStorage.setItem("Player2Name", secondPlayerName);
}
function getPlayerNames(){
    player1Name = sessionStorage.getItem("Player1Name");
    player2Name = sessionStorage.getItem("Player2Name");
    console.log(player1Name + " " + player2Name);
    document.getElementById("player1").innerHTML = player1Name;
    document.getElementById("player2").innerHTML = player2Name;
}
function displayScore () {
    var playerOneScore = score;

}

最佳答案

我最近需要这样做。但我所做的是，仅禁用按钮几秒钟，以便它足够长以防止双击，并且足够短以在任何验证错误等情况下仍继续进行。

<script type="text/javascript">

        $(document).on('click', ':button', function (e) {

            var btn = $(e.target);
            btn.attr("disabled", "disabled"); // disable button

            window.setTimeout(function () {
                btn.removeAttr("disabled"); // enable button
            }, 2000 /* 2 sec */);
        });

</script>

如果您希望按钮保持禁用状态，请使用此

<script type="text/javascript">

        $(document).on('click', ':button', function (e) {

            var btn = $(e.target);
            btn.attr("disabled", "disabled"); // disable button

        });

</script>

关于javascript - 按下一次按钮后如何灰显和禁用按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34136053/

文章推荐： .net - 获取与Webbrowser文档中的XPath表达式匹配的所有元素

文章推荐： macos - 从 Carbon 窗口生成的 Cocoa 窗口由任务控制重新排序

文章推荐： cocoa - PNG 到 NSImage 并返回会导致接近透明的锯齿

文章推荐： objective-c - NSXML 添加命名空间以使 XPath 查询工作

python - 将灰度图像分量颜色分割为黑、白、灰
经过很长时间的尝试，我仍然找不到解决问题的正确方法。问题是将这个灰度图像分割成 3 种不同的颜色:边界应该是黑色，边界的内部空间应该是白色，所有其他介质应该是黑色。我尝试了几种不同的方法，包括直接强
linux - ./a.sh 和 ./a.sh 有什么区别？。/灰？
这个问题在这里已经有了答案: What is the difference between "./somescript.sh" and ". ./somescript.sh" (4 个答案) 关闭

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 按下一次按钮后如何灰显和禁用按钮？