Whenever I click the button, the user's HP decreases until it reaches 0 and then the button changes. However, a peculiar issue arises when the userHealth hits zero - the button does not change immediately. An additional click is required for the button to update. How can this be resolved?
JavaScript:
$(".attBtn").click(function() {
var userId = 4;
var attackdmg = Math.floor(Math.random() * (20 - 1 + 1)) + 1;
var userdmg = Math.floor(Math.random() * (20 - 1 + 1)) + 1;
var minimum = 0;
if(userHealth == 0){
info.innerHTML = '<strong>'+user.textContent+'</strong> have been defeated.';
attackBtn.css("backgroundColor", "blue");
attackBtn.css("border", "none");
innerAttBtn.innerHTML = "Get the reward <img src="+"/img/chest2.png"+"/> ";
return false;
}else if(attackerHealth == 0){
info.innerHTML = '<strong>You</strong> have been defeated.';
}else if(attackerHealth == 0 && userHealth == 0){
info.innerHTML = '<strong>DRAW FIGHT</strong>';
}else{
userHealth -= attackdmg;
attackerHealth -= userdmg;
document.getElementById('attackerBar').setAttribute("style","width:"+attackerHealth+"%");
document.getElementById('userBar').setAttribute("style","width:"+userHealth+"%");
$.ajax("/arena/fight-user/"+userId+"/attack/"+attackdmg+"/"+userdmg,
{
});
if(userHealth < 0){userHealth = minimum;}
if(attackerHealth < 0){attackerHealth = minimum;}
userHp.innerHTML = '<strong>'+userHealth+'</strong>';
attackerHp.innerHTML = '<strong>'+attackerHealth+'</strong>';
info.innerHTML = '<strong>' +user.textContent+'</strong>' +' hit <strong>You</strong> with ' +userdmg+' dmg <br> ' + '<strong>You</strong> hit '
+'<strong>'+user.textContent+'</strong>'+ ' with '+ attackdmg +' dmg';
}
});