Question

I’m attempting to create a generic game of blackjack through javascript. The game starts when you click the start button:

<button type="button" onClick="deal()">Start Game</button>  

which in turn runs the method deal:

function deal() {  
    card1 = Math.floor(Math.random() * 52);  
    card2 = Math.floor(Math.random() * 52);  
    card1 = changeCard(card1);  
    card2 = changeCard(card2);  
    score = card1 + card2;  
    for (var i = 0; i < aceAmount || score > 21;aceAmount--) {  
        score -= 10;  
    }  
    document.write("You were dealt a " + card1 + " and a " + card2 + " for a total of " + score + ".\nDo you wish to hit or pass?");  
    aceAmount = 0;  
};

My question is once the deal method runs, how can I get two html buttons to show up on the screen, such as:

<button type="button" onClick="hit()">Hit</button>  
<button type="button" onClick="pass()">Pass</button>

Answer 1

What to do?
Use the CSS display property to hide your buttons, then using the getElementById, method you “select” those buttons to do some “Javascripty” stuff on them.

Your HTML

<button id="hit_btn" style="display:none;" type="button" onClick="hit()">Hit</button>  
<button id="pass_btn" style="display:none;" type="button" onClick="pass()">Pass</button>

and add this to your Javascript function:

document.getElementById('hit_btn').style.display = '';
document.getElementById('pass_btn').style.display = '';

and when you want to hide them back again

document.getElementById('hit_btn').style.display = 'none';
document.getElementById('pass_btn').style.display = 'none';