I'm trying to develop a blackjack game using JavaScript and HTML.
I've tested it using JavaScript alone on REPL and it worked fine, I've now tried to move it over to a html page so that I can eventually add in some graphics.
However when I run the code below none of the players hands, house hand or the winner appear on the screen, but the prompts do.
Can anyone see an issue with this?
function play() {
playersQ = prompt('How many people are playing?');
playershands = [];
i = 0;
count = 0;
var player_cards = 0;
function player() {
var player_cards = Math.floor(Math.random() * 21) + 1;
while (player_cards < 21) {
Hit = prompt('Players cards are ' + player_cards + ' Would you like stick or twist?(S/T)')
if (Hit == 'T') {
player_cards = player_cards + Math.floor(Math.random() * 11) + 1;
} else if (Hit == 'S') {
break;
} else if (player_cards > 21) {
alert('Player is bust');
break;
}
}
return player_cards;
}
function house() {
var house_cards = Math.floor(Math.random() * 21) + 1;
document.getElementById('housecurrenthand').innerHTML = ('House has ' + house_cards);
while (house_cards < 18) {
house_cards = house_cards + Math.floor(Math.random() * 11);
document.getElementById('housecurrenthand').innerHTML = ('House has ' + house_cards);
if (house_cards > 21) {
alert('House is bust')
}
}
return house_cards;
}
while (i < playersQ) {
playershands.push(player());
i = i + 1;
}
var house_hand = house();
while (count < playersQ) {
count2 = count + 1
if (playershands[count] > house_hand && playershands[count] < 22) {
document.getElementById('playershand' + [i]).innerHTML = ('Player ' + count2 + ' has ' + playershands[count]);
document.getElementById('winner').innerHTML = ('Player wins');
count = count + 1;
} else if (house_hand > playershands[count] && house_hand < 22) {
document.getElementById('househand').innerHTML = ('House has' + house_hand);
document.getElementById('winner').innerHTML = ('House wins');
break;
} else if (house_hand == playershands[count]) {
document.getElementById('winner').innerHTML = ('draw');
break;
}
}
}<head>
<h1 align="center">21 Game</h1>
</head>
<body bgcolor="#458B00">
<div align='center'>
<h3>House Cards</h3>
<h5 id='currenthousehand'></h5>
<h5 id='househand'> </h5>
<h3>Players Cards</h3>
<h5 id='playershand1'> </h5>
<h5 id='playershand2'> </h5>
<h5 id='playershand3'> </h5>
<h5 id='playershand4'> </h5>
<h5 id='playershand5'> </h5>
<h5 id='playershand6'> </h5>
<h5 id='playershand7'> </h5>
<h5 id='playershand8'> </h5>
<h5 id='playershand9'> </h5>
<h5 id='playershand10'> </h5>
<h4 id='winner'> </h4>
<button onclick="play()" float='bottom'>Play</button>
</div>
</body>
You are trying to reach to value of DOM element with ID housecurrenthand in line 66 line (function house), but in your html file you have declared header with ID currenthousehand (line 12).
If you are not using Google Chrome I encourage you to try it out. When your press F12 there is developer tool that will help you to find out where the problem is.
Check official documentation for Google Chrome, where is a lot of information how to debug your web code. If you are using any other browser just look for documentation or tutorials how to handle issue like current one.