Question

I am creating a blackjack game using html, js, ajax and php. When the Player first loads the game, a prompt appears on the page asking for the name, and this goes to a name.php which checks to see if the user name is in the database. If not, it adds it. In either case, it will place the player’s name and bank total on the screen. This part of my code was working fine until I added the next part of the code.

When the user clicks on the “hit” button, hit.php is called, which for now should just be pulling 1 card from the deck table (will fully implement hit later on) and placing it within the “player” div on the screen. However, now that I have 2 ajax calls, nothing whatsoever is happening, including the original prompt for the player name.

Is the 2nd call somehow interfering with the 1st call?

Any suggestions as to how I should treat the ajax calls would be greatly appreciated.

var username;
var playerName = "";
var playerBank = 0;
var playerCard;
var playerHandValue = 0;
var dealerHandValue = 0;
var randomCardNumber;

function checkName() {
username = prompt("Welcome to Blackjack.\n Please enter your username");
if(document.getElementById('playerName').value == null) {
    ajaxName();
}   
click();
}

function printName() {
return playerName;
}

function printBank() {
return playerBank;
}
function ajaxName() {
var uName = username;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttpN=new XMLHttpRequest(); 
} 
else {// code for IE6, IE5 
    xmlhttpN=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttpN.onreadystatechange=function() { 
    if (xmlhttpN.readyState==4 && xmlhttpN.status==200) { 
        var elements = xmlhttpN.responseText.split("|");
        playerName = elements[0];

        playerBank = elements[1];
        document.getElementById('playerName').innerHTML = printName();
        alert(playerName);
        document.getElementById('playerBank').innerHTML = printBank();

    }
} 
xmlhttpN.open("POST","name.php",true); 
xmlhttpN.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttpN.send("player="+username);
}
function click() {
document.getElementById('hit').onclick = function(){ ajaxButton(this);};
document.getElementById('stand').onclick = function(){ ajaxButton(this);};
document.getElementById('raiseBet').onclick = function(){ ajaxButton(this);};
document.getElementById('newGame').onclick = function(){ ajaxButton(this);};
}
function ajaxButton(buttonClicked) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttpB=new XMLHttpRequest(); 
} 
else {// code for IE6, IE5 
    xmlhttpB=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() { 
    if (xmlhttpB.readyState==4 && xmlhttpB.status==200) { 
        var elements = xmlhttpB.responseText;
        if(buttonClicked.innerHTML == "HIT") {
            randomCardNumber = randNumber(1,52);
            playerCard = elements[0];
            document.getElementById('player').innerHTML = displayCard();
            xmlhttpB.open("POST","hit.php",true); 
            xmlhttpB.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xmlhttpB.send("card_id="+randomCardNumber);
        }
    }
if(buttonClicked.innerHTML == "STAND") {
    alert("stand");
}
if(buttonClicked.innerHTML == "RAISE BET") {
    alert("raise bet");
}
if(buttonClicked.innerHTML == "NEW GAME") {
    alert("new game");
}
}

Answer 1

No JavaScript errors reported in your browser, and the prompt isn’t coming up at all, and nothing happens when you click hit? It sounds as though perhaps you aren’t calling the checkName() or click() functions at all. Have you refactored those into methods recently when they weren’t previously?

It seems to me that checkName should occur as soon as the page loads, so if it doesn’t already, try putting a call to it in a script block at the bottom of the page.