Search code examples
javascriptblackjack

showResult function in blackjack not working

My show result function for blackjack isn't working properly despite passing the correct argument in it which computes the winner of the game. I nested the function in the function for the deal button to test if it was working.

As you can see in this screenshot, when I console log the computeWinner function it works perfectly but it won't show up on the screen.

The specific computeWinner function:

function computeWinner() {
    let winner;

if (YOU['score'] <= 21) {
if (YOU['score'] > DEALER['score'] || (DEALER)['score'] > 21) {
console.log('You won');
winner = YOU;

} else if (YOU['score'] < DEALER['score']) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] === DEALER['score']) {
    console.log('You drew');
}

} else if (YOU['score'] > 21 && DEALER['score'] <= 21) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] > 21 && DEALER['score'] > 21) {
    console.log('You drew');

}

console.log('Winner is', winner);
}

The specific showResult function:

function showResult(winner) {
    let message, messageColor;
    
    if (winner === YOU) {
    message = 'You won';
    messageColor = 'green';
    winSound.play();
    


} else if (winner === DEALER) {
    message = 'You lost';
    messageColor = 'red';
    lossSound.play();

} else {
    message = 'You drew';
    messageColor = 'black';
}

document.querySelector('#blackjack-result').textContent = message;
document.querySelector('#blackjack-result').style.color = messageColor;



}

How I placed it in the deal button function:

function blackjackDeal() {

    
    showResult(computeWinner());
    let yourImages = document.querySelector('#your-box').querySelectorAll('img');
    let dealerImages = document.querySelector('#dealer-box').querySelectorAll('img');
    

    for (i=0; i < yourImages.length; i++) {
        yourImages[i].remove();
    }


    for (i=0; i < dealerImages.length; i++) {
        dealerImages[i].remove();
    }

YOU['score'] = 0;
DEALER['score'] = 0;

document.querySelector('#your-blackjack-result').textContent = 0;
document.querySelector('#your-blackjack-result').style.color = 'white';

document.querySelector('#dealer-blackjack-result').textContent = 0;
document.querySelector('#dealer-blackjack-result').style.color = 'white';
}

And the whole javascript if it would be of any help:

//Challenge 5: Blackjack

let blackjackGame = {

'dealer': {'scoreSpan': '#dealer-blackjack-result', 'div': '#dealer-box', 'score': 0},  
'you': {'scoreSpan': '#your-blackjack-result', 'div': '#your-box', 'score': 0},   
'cards': ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'K', 'J', 'Q', 'A'],
'cardsMap': {'2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, 'K': 10, 'J': 10, 'Q': 10, 'A': [1, 11]}

};


const YOU = blackjackGame['you']
const DEALER = blackjackGame['dealer']

const hitSound = new Audio('static/sounds/swish.m4a');
const winSound = new Audio('static/sounds/cash.mp3');
const lossSound = new Audio('static/sounds/aww.mp3');

document.querySelector('#blackjack-hit-button').addEventListener('click', blackjackHit);
document.querySelector('#blackjack-stand-button').addEventListener('click', dealerLogic);
document.querySelector('#blackjack-deal-button').addEventListener('click', blackjackDeal);

function blackjackHit() {
let card = randomCard();
showCard(card, YOU);
updateScore(card, YOU);
showScore(YOU);}


function randomCard() {
    let randomIndex = Math.floor(Math.random() * 13);
    return blackjackGame['cards'][randomIndex];
    }


function showCard(card, activePlayer) {
    if (activePlayer['score'] <= 21) {
    let cardImage = document.createElement('img');
    cardImage.src = `static/images/${card}.png`;
    document.querySelector(activePlayer['div']).appendChild(cardImage);
    hitSound.play(); }  
}

function blackjackDeal() {

    
    showResult(computeWinner());
    let yourImages = document.querySelector('#your-box').querySelectorAll('img');
    let dealerImages = document.querySelector('#dealer-box').querySelectorAll('img');
    

    for (i=0; i < yourImages.length; i++) {
        yourImages[i].remove();
    }


    for (i=0; i < dealerImages.length; i++) {
        dealerImages[i].remove();
    }

YOU['score'] = 0;
DEALER['score'] = 0;

document.querySelector('#your-blackjack-result').textContent = 0;
document.querySelector('#your-blackjack-result').style.color = 'white';

document.querySelector('#dealer-blackjack-result').textContent = 0;
document.querySelector('#dealer-blackjack-result').style.color = 'white';
}

function updateScore(card, activePlayer) {


if (card === 'A') {

    if (activePlayer['score'] + blackjackGame['cardsMap'][card][1] <= 21) {
activePlayer['score'] += blackjackGame['cardsMap'][card][1];

}  else { 

activePlayer['score'] += blackjackGame['cardsMap'][card][0];}



} else {

activePlayer['score'] += blackjackGame['cardsMap'][card];
}
}

function showScore(activePlayer) {

if (activePlayer['score'] > 21) {
    document.querySelector(activePlayer['scoreSpan']).textContent = 'BUST!';
    document.querySelector(activePlayer['scoreSpan']).style.color = 'red';
    
}

else {
document.querySelector(activePlayer['scoreSpan']).textContent = activePlayer['score'];
}

}

function dealerLogic() {
let card = randomCard();
showCard(card, DEALER);
updateScore(card, DEALER);
showScore(DEALER);




}

function computeWinner() {
    let winner;

if (YOU['score'] <= 21) {
if (YOU['score'] > DEALER['score'] || (DEALER)['score'] > 21) {
console.log('You won');
winner = YOU;

} else if (YOU['score'] < DEALER['score']) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] === DEALER['score']) {
    console.log('You drew');
}

} else if (YOU['score'] > 21 && DEALER['score'] <= 21) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] > 21 && DEALER['score'] > 21) {
    console.log('You drew');

}

console.log('Winner is', winner);
}

function showResult(winner) {
    let message, messageColor;
    
    if (winner === YOU) {
    message = 'You won';
    messageColor = 'green';
    winSound.play();
    


} else if (winner === DEALER) {
    message = 'You lost';
    messageColor = 'red';
    lossSound.play();

} else {
    message = 'You drew';
    messageColor = 'black';
}

document.querySelector('#blackjack-result').textContent = message;
document.querySelector('#blackjack-result').style.color = messageColor;



}

Lastly, the HTML and CSS (if necessary):

<div class="container-5"> 

<h2>Blackjack Challenge</h2>
<h3><span id="blackjack-result">Let's Play</span></h3>

<div class="flex-blackjack-row-1">
    <div id="your-box">
        <h2>You: <span id="your-blackjack-result">0</span></h2>
    </div>
<div id="dealer-box">
    <h2>Dealer: <span id="dealer-blackjack-result">0</span></h2>
</div>
</div>
<div class="flex-blackjack-row-2">
    <button class="btn-lg btn-primary mr-2" id="blackjack-hit-button">Hit</button>
    <button class="btn-lg btn-warning mr-2" id="blackjack-stand-button">Stand</button>
    <button class="btn-lg btn-danger mr-2" id="blackjack-deal-button">Deal</button>
</div>


<div class="flex-blackjack-row-3">
   
    <table>
        <tr>
            <th>Wins</th>
            <th>Losses</th>
            <th>Draws</th>
        </tr>

<tr>
    <td><span id="wins">0</span></td>
    <td><span id="losses">0</span></td>
    <td><span id="draws">0</span></td>
    
</tr>

    </table>

</div>


</div>








<script src ="static/script.js">
</script>

</body>
</html>

.flex-blackjack-row-1, .flex-blackjack-row-2 
{
display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
color: #ffffff;
background: url('https://image.freepik.com/free-vector/poker-table-background-green-color_47243-1068.jpg') center;}


.flex-blackjack-row-3 {

    display: flex;
    border: 1px solid black;
    padding: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;    

}


.flex-blackjack-row-1 div {

border: 1px solid black;
padding: 10px;
height: 350px;
text-align: center;
flex: 1;
}

.flex-blackjack-row-1 img {

    width: 25%;
    padding: 10px;
}

.flex-blackjack-row-2 button {

border: 1px solid black;
padding: 10px;
}

.flex-blackjack-row-2 div {

border: 1px solid black;
padding: 10px;
}


table, th, td {

padding: 5px;
border: 1px solid black;

}






.flex-blackjack-row-2 {
    display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
Solution

  • Just eyeballing the code here but you seem to be not returning anything from your computeWinner(). I added a return like so: return winner;. See if this is your expected output.

        //Challenge 5: Blackjack

let blackjackGame = {

'dealer': {'scoreSpan': '#dealer-blackjack-result', 'div': '#dealer-box', 'score': 0},  
'you': {'scoreSpan': '#your-blackjack-result', 'div': '#your-box', 'score': 0},   
'cards': ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'K', 'J', 'Q', 'A'],
'cardsMap': {'2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, 'K': 10, 'J': 10, 'Q': 10, 'A': [1, 11]}

};


const YOU = blackjackGame['you']
const DEALER = blackjackGame['dealer']

const hitSound = new Audio('static/sounds/swish.m4a');
const winSound = new Audio('static/sounds/cash.mp3');
const lossSound = new Audio('static/sounds/aww.mp3');

document.querySelector('#blackjack-hit-button').addEventListener('click', blackjackHit);
document.querySelector('#blackjack-stand-button').addEventListener('click', dealerLogic);
document.querySelector('#blackjack-deal-button').addEventListener('click', blackjackDeal);

function blackjackHit() {
let card = randomCard();
showCard(card, YOU);
updateScore(card, YOU);
showScore(YOU);}


function randomCard() {
    let randomIndex = Math.floor(Math.random() * 13);
    return blackjackGame['cards'][randomIndex];
    }


function showCard(card, activePlayer) {
    if (activePlayer['score'] <= 21) {
    let cardImage = document.createElement('img');
    cardImage.src = `static/images/${card}.png`;
    document.querySelector(activePlayer['div']).appendChild(cardImage);
    hitSound.play(); }  
}

function blackjackDeal() {

    
    showResult(computeWinner());
    let yourImages = document.querySelector('#your-box').querySelectorAll('img');
    let dealerImages = document.querySelector('#dealer-box').querySelectorAll('img');
    

    for (i=0; i < yourImages.length; i++) {
        yourImages[i].remove();
    }


    for (i=0; i < dealerImages.length; i++) {
        dealerImages[i].remove();
    }

YOU['score'] = 0;
DEALER['score'] = 0;

document.querySelector('#your-blackjack-result').textContent = 0;
document.querySelector('#your-blackjack-result').style.color = 'white';

document.querySelector('#dealer-blackjack-result').textContent = 0;
document.querySelector('#dealer-blackjack-result').style.color = 'white';
}

function updateScore(card, activePlayer) {


if (card === 'A') {

    if (activePlayer['score'] + blackjackGame['cardsMap'][card][1] <= 21) {
activePlayer['score'] += blackjackGame['cardsMap'][card][1];

}  else { 

activePlayer['score'] += blackjackGame['cardsMap'][card][0];}



} else {

activePlayer['score'] += blackjackGame['cardsMap'][card];
}
}

function showScore(activePlayer) {

if (activePlayer['score'] > 21) {
    document.querySelector(activePlayer['scoreSpan']).textContent = 'BUST!';
    document.querySelector(activePlayer['scoreSpan']).style.color = 'red';
    
}

else {
document.querySelector(activePlayer['scoreSpan']).textContent = activePlayer['score'];
}

}

function dealerLogic() {
let card = randomCard();
showCard(card, DEALER);
updateScore(card, DEALER);
showScore(DEALER);




}

function computeWinner() {
    let winner;

if (YOU['score'] <= 21) {
if (YOU['score'] > DEALER['score'] || (DEALER)['score'] > 21) {
console.log('You won');
winner = YOU;

} else if (YOU['score'] < DEALER['score']) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] === DEALER['score']) {
    console.log('You drew');
}

} else if (YOU['score'] > 21 && DEALER['score'] <= 21) {
    console.log('You lost');
    winner = DEALER;

} else if (YOU['score'] > 21 && DEALER['score'] > 21) {
    console.log('You drew');

}

return winner;
}

function showResult(winner) {
console.log('Winner is', winner);
    let message, messageColor;
    
    if (winner === YOU) {
    message = 'You won';
    messageColor = 'green';
    winSound.play();
    


} else if (winner === DEALER) {
    message = 'You lost';
    messageColor = 'red';
    lossSound.play();

} else {
    message = 'You drew';
    messageColor = 'black';
}

document.querySelector('#blackjack-result').textContent = message;
document.querySelector('#blackjack-result').style.color = messageColor;



}
        .flex-blackjack-row-1, .flex-blackjack-row-2 
{
display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
color: #ffffff;
background: url('https://image.freepik.com/free-vector/poker-table-background-green-color_47243-1068.jpg') center;}


.flex-blackjack-row-3 {

    display: flex;
    border: 1px solid black;
    padding: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;    

}


.flex-blackjack-row-1 div {

border: 1px solid black;
padding: 10px;
height: 350px;
text-align: center;
flex: 1;
}

.flex-blackjack-row-1 img {

    width: 25%;
    padding: 10px;
}

.flex-blackjack-row-2 button {

border: 1px solid black;
padding: 10px;
}

.flex-blackjack-row-2 div {

border: 1px solid black;
padding: 10px;
}


table, th, td {

padding: 5px;
border: 1px solid black;

}






.flex-blackjack-row-2 {
    display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
    <div class="container-5"> 

<h2>Blackjack Challenge</h2>
<h3><span id="blackjack-result">Let's Play</span></h3>

<div class="flex-blackjack-row-1">
    <div id="your-box">
        <h2>You: <span id="your-blackjack-result">0</span></h2>
    </div>
<div id="dealer-box">
    <h2>Dealer: <span id="dealer-blackjack-result">0</span></h2>
</div>
</div>
<div class="flex-blackjack-row-2">
    <button class="btn-lg btn-primary mr-2" id="blackjack-hit-button">Hit</button>
    <button class="btn-lg btn-warning mr-2" id="blackjack-stand-button">Stand</button>
    <button class="btn-lg btn-danger mr-2" id="blackjack-deal-button">Deal</button>
</div>


<div class="flex-blackjack-row-3">
   
    <table>
        <tr>
            <th>Wins</th>
            <th>Losses</th>
            <th>Draws</th>
        </tr>

<tr>
    <td><span id="wins">0</span></td>
    <td><span id="losses">0</span></td>
    <td><span id="draws">0</span></td>
    
</tr>

    </table>

</div>


</div>

    Here is a fiddle as well.