HTML Content не обновляется немедленно во время цикла в JavaScript ⇐ Html

[Anonymous]

Я создаю простой веб -сайт карточной игры, на котором игрок рисует карты, пытающиеся приблизиться, но не превышая предел очков. < /p>
В идеале при принятии новой карты (через Подтвердите диалоговое окно), изображение нарисованной карты должно отображаться мгновенно. Тем не менее, изображения появляются только после того, как цикл заканчивается, а не сразу после того, как нарисована каждая карта.
Другими словами, все карты появляются, когда я отказываюсь от карт (выход из петли). < /P>
< P> Любая помощь или советы будут оценены.

Код: Выделить всё

Exercise Javascript







Seven and a half game




Player Information
Name: 
Initial Money: 
Play!








New Round
End Game






Your Cards



Dealer's Cards

Javascript

Код: Выделить всё

var playerName = "";
var currentMoney = 0;
var playerCards = [];
var dealerCards = [];
var deck;
let initialdeck = [
{ value: 1, image: "cards/1.png" },
{ value: 2, image: "cards/2.png" },
{ value: 3, image: "cards/3.png" },
{ value: 4, image: "cards/4.png" },
{ value: 5, image: "cards/5.png" },
{ value: 6, image: "cards/6.png" },
{ value: 7, image: "cards/7.png" },
{ value: 0.5, image: "cards/8.png" },
{ value: 0.5, image: "cards/9.png" },
{ value: 0.5, image: "cards/10.png" },
{ value: 1, image: "cards/11.png" },
{ value: 2, image: "cards/12.png" },
{ value: 3, image: "cards/13.png" },
{ value: 4, image: "cards/14.png" },
{ value: 5, image: "cards/15.png" },
{ value: 6, image: "cards/16.png" },
{ value: 7, image: "cards/17.png" },
{ value: 0.5, image: "cards/18.png" },
{ value: 0.5, image: "cards/19.png" },
{ value: 0.5, image: "cards/20.png" },
{ value: 1, image: "cards/21.png" },
{ value: 2, image: "cards/22.png" },
{ value: 3, image: "cards/23.png" },
{ value: 4, image: "cards/24.png" },
{ value: 5, image: "cards/25.png" },
{ value: 6, image: "cards/26.png" },
{ value: 7, image: "cards/27.png" },
{ value: 0.5, image: "cards/28.png" },
{ value: 0.5, image: "cards/29.png" },
{ value: 0.5, image: "cards/30.png"  },
{ value: 1, image: "cards/31.png" },
{ value: 2, image: "cards/32.png" },
{ value: 3, image: "cards/33.png" },
{ value: 4, image: "cards/34.png" },
{ value: 5, image: "cards/35.png" },
{ value: 6, image: "cards/36.png" },
{ value: 7, image: "cards/37.png" },
{ value: 0.5, image: "cards/38.png" },
{ value: 0.5, image: "cards/39.png" },
{ value: 0.5, image: "cards/40.png" }
];

function play() {
// Get the name and the initial money.
playerName = document.getElementById("Name").value;
currentMoney = document.getElementById("Money").value;

// Input check
if (playerName.trim() === "" || currentMoney.trim() === "") {
alert("Please enter both your name and initial money.");
return;
}
currentMoney = parseFloat(currentMoney);
if (isNaN(currentMoney)) {
alert("Please enter a valid number for initial money.");
return;
}

// Set variables
deck = [...initialdeck];
document.getElementById("player-name").textContent = playerName;
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;

// Adjust what to display after play button is pressed
document.getElementById("before-input").style.display = "none";
document.getElementById("after-input-play").style.display = "block";
document.getElementById("player-name").style.display = "block";
document.getElementById("current-money").style.display = "block";
document.getElementById("cards-section").style.display = "block";
}

function reset() {
// If player choses to end the game, show ending message
alert(`You receive ${currentMoney.toFixed(2)} €. See you next time.`);

// Reset all values
let playerCardContainer = document.getElementById("player-card-container");
playerCardContainer.innerHTML = "";
let dealerCardContainer = document.getElementById("dealer-card-container");
dealerCardContainer.innerHTML = "";
playerName = "";
currentMoney = 0;
deck = [...initialdeck];
document.getElementById("player-name").textContent = "";
document.getElementById("current-money").textContent = "";

// Display/hide elements
document.getElementById("Name").value = "";
document.getElementById("Money").value = "";
document.getElementById("cards-section").style.display = "none";
document.getElementById("after-input-play").style.display = "none";
document.getElementById("before-input").style.display = "block";

}

function round() {
let keepGoing = true;
let lost = false;
bet = parseFloat(prompt("Money Bet:"));
if (isNaN(bet)) {
alert("Invalid bet: Your bet is not a number.");
return;
}else if (bet  currentMoney) {
alert("Invalid bet amount.  Please enter a positive number within your available funds.");
return;
}

// Reset score and cards
playerScore = 0;
let playerCardContainer = document.getElementById("player-card-container");
playerCardContainer.innerHTML = "";
let dealerCardContainer = document.getElementById("dealer-card-container");
dealerCardContainer.innerHTML = "";

// Update current money
currentMoney -= bet;
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;

// Loop
do {
let card = getRandomCard();
displayDrawnCard(card, 'player'); /////////////////////////////////////////// Issue here
playerScore += card.value;
if(playerScore > 7.5){
lost = true;
}
if(!lost){
keepGoing = confirm("Do you want another card?") /////////////// Cards are not shown until i decline this confirm.
}
} while (keepGoing && !lost);

dealerTurn(playerScore, bet);
}

function getRandomCard() {
if (deck.length === 0) return null;
let randomIndex = Math.floor(Math.random() * deck.length);
let card = deck[randomIndex];
deck.splice(randomIndex, 1);
return card;
}

function displayDrawnCard(card, type) {
let cardContainer;
if (type === 'player') {
cardContainer = document.getElementById("player-card-container");
} else if (type === 'dealer') {
cardContainer = document.getElementById("dealer-card-container");
}

// Create a new img element for the card
let cardElement = document.createElement("img");
cardElement.src = card.image; // Use the image path stored in the card object

// Add class to style
cardElement.classList.add("Card");

// Append the image to the container
cardContainer.appendChild(cardElement);
}

function dealerTurn(playerScore, bet){
let keepGoing = true;
let dealer_lost = false;
let dealerScore = 0;

// Check if dealer needs cards
if(playerScore>7.5){
keepGoing = false;
}

// Loop
while (keepGoing && !dealer_lost){
let card = getRandomCard();
displayDrawnCard(card, 'dealer'); /////////////////////////////////////////// Same issue here
dealerScore += card.value;
if(dealerScore > 7.5){
dealer_lost = true;
}
if(dealer_lost || playerScore < dealerScore){
keepGoing = false;
}
}

// Update data and show result
if (dealer_lost) {
currentMoney = currentMoney + 2*bet;
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;
alert(`You have won ${bet.toFixed(2)} €. Remaining money: ${currentMoney.toFixed(2)} €.`);
} else {
document.getElementById("current-money").textContent = `Total Money: ${currentMoney.toFixed(2)} €`;
alert(`You have lost ${bet.toFixed(2)} €.  Remaining money: ${currentMoney.toFixed(2)} €.`);
}
deck = [...initialdeck];
}

На всякий случай:
Css:

Код: Выделить всё

body{
min-width: 600px;
max-width: 800px;
font-family:Verdana,Arial, serif;
margin: auto;
background-color: #04701824;
}

.header {
font-family:Georgia, Times, serif;
background-color:#047018;
color: #FFFFFF;
font-size: 120%;
vertical-align: center;
height: 100px;
}

h1{
text-align: center;
line-height: 100px;
}

h2{
font-family:Georgia, Times, serif;
font-style:italic;
background-color:#0470189a;
padding-left: 15px;
}

h3{
font-family:Georgia, Times, serif;
font-style:italic;
background-color:#0470189a;
padding-left: 15px;
}

input[type="text"] {
width: 300px;
}

.buttons {
min-width: 60px;
height: 30px;
background-color: #047018;
color: white;
padding:0 15px;
border: none;
border-radius: 15px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}

.buttons:hover {
background-color: #02420d;
}

.button-container {
display: flex;
gap: 10px;
justify-content: center;
}

hr {
border: none;
height: 3px;
background-color: #047018;
width: 100%;
margin: 5px auto;
}

.Card {
width: 80px;
height: auto;
margin: 8px;
display: inline-block;
}

Я перепробовал все, но не смог найти источник проблемы. Не думаю, что смогу публиковать изображения.

Подробнее здесь: https://stackoverflow.com/questions/793 ... javascript