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

Question

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);
    }

.fadeOut is leaving alertModal invisible. Perhaps a .show would fix it? — Grax32
– Grax32, Commented Nov 14, 2019 at 16:32
"The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page." — Andreas
– Andreas, Commented Nov 14, 2019 at 16:38

PeonProgrammer · Accepted Answer · 2019-11-14 16:41:34Z

2

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.

answered Nov 14, 2019 at 16:41

PeonProgrammer

1,5352 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related