简体   繁体   中英

.on('click', function(){}) only working on first click

I'm making a Blackjack game to exercise my Javascript skills. I had a bunch of alert() messages tied to the betting function to prevent invalid entries. In updating the code to have a more elegant message style than a browser alert, I wrote a function called alertModal() that pops up a message on the screen and then fades away. The message pops up the first time a user tries to enter an invalid bet, but does not pop up any other messages if the bet is invalid-- nothing happens. I know the placeBet() function is still running when the user clicks again, because if the bet is valid, dealFirstCards() runs and the game proceeds. So it seems to me that for some reason, the if/else portion of the placeBet() function is only running on the first click...

The game is live and running with this code at http://cnb-blackjack.netlify.com/game.html

Here is the javascript code in question:


// Player places a bet
    $('div.bet').on('click', function() {
        $(this).removeClass('glow');
        $('.bet-button').addClass('glow');
    });
    $('.bet-button').on('click', function() {
        event.preventDefault();
        if (!placeBet.called) {
            placeBet();
        }
    });

// PLACE BET
    function placeBet() {
        var $bet = parseInt($('.bet-input').val())
        var $bank = parseInt($('.player-bank').text())
        var $currentBet = $('.current-bet');
        if (!isNaN($bet) && $bet <= $bank && $bet !== 0) {
            $currentBet.text(' $' + $bet);
            $('.bet input[type="text"]').val('');
            $('.place-bet .hideaway').slideUp();
            $('.player-bank').text($bank - $bet);
            placeBet.called = true;
            dealFirstCards();
        } else if ($bet > $bank) {
            var $message = 'Bet cannot exceed the amount in your Bank!';
            alertModal($message);
        } else if (isNaN($bet)) {
            var $message = 'Enter a number, without "$".';
            alertModal($message);
        } else if ($bet === 0) {
            var $message = "Betting nothing won't get you very far...";
            alertModal($message);
        }
    }

// SHOW MODAL
    function alertModal(message) {
        $popUp = $('.alert-message');
        $('.modal').removeClass('hide');
        $popUp.text(message);
        setTimeout(function() {
            $('.modal').fadeOut(1000);
        }, 1000);
    }
function alertModal(message) {

        $popUp = $('.alert-message');
        $('.modal').show();
        $popUp.text(message);
        setTimeout(function() {
            $('.modal').fadeOut(1000);
        }, 1000);
    }

As comments have explained, fadeOut is leaving the modal hidden after the first time it's clicked. Just call $(element).show(); on the modal to show it again and let fadeOut remove it.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM