我想简单地更改函数内段落的文本，但这在我的情况下不起作用。
尽管当我记录这一点时，它显示了内部值发生变化的元素，但"；旧的"；值作为textContent。
问题涉及最后一个名为drawCard的函数。
这是托管在github页面上的预览，代码：
'use strict';
let money = 500;
let playerBet = 0 ;
let playerScore = 0;
let dealerScore = 0;
// #######################################
// #######################################
// BET
// Bet amount
const addBetAmount = document.querySelectorAll('.bet-amount');
const sumBetAmountBox = document.querySelector('.player-bet');
const placeBet = document.querySelector('.bet-btn');
const betBox = document.querySelector('.bet');
const customBet = document.querySelector('.custom-bet-amount');
for (const betAmount of addBetAmount){
betAmount.addEventListener('click',() => {
if(playerBet<money){
if(betAmount.textContent === "All in")
playerBet = money;
else{
if (playerBet + Number(betAmount.textContent) > money)
playerBet = money;
else
playerBet += Number(betAmount.textContent);
}
sumBetAmountBox.textContent = playerBet;
}
})
}
// Place bet
const menuFront = document.querySelector('.menu__side--front');
const menuBack = document.querySelector('.menu__side--back');
const placedBetBox = document.querySelector('.placed-bet');
placeBet.addEventListener('click',() =>{
if (playerBet){
betBox.textContent = playerBet;
placedBetBox.classList.toggle('hidden');
let audio = new Audio('img/drop.mp3');
audio.play();
playerBet = 0;
sumBetAmountBox.textContent = playerBet;
// draw cards
drawCard('player',playerScore);
// drawCard('dealer',dealerScore);
// drawCard('player',playerScore);
setTimeout(drawCard.bind(null,'dealer',dealerScore),2000);
setTimeout(drawCard.bind(null,'player',playerScore),2000);
// switch menu
menuFront.classList.add('swipe-front');
menuBack.classList.add('swipe-back');
}
else alert('In order to play you have to place a bet')
})
// Custom bet value
customBet.addEventListener('blur',() => {
if (customBet.value > 0){
if (customBet.value > money)
playerBet = money;
else
playerBet = customBet.value;
sumBetAmountBox.textContent = playerBet;
}
else alert('Bet must be greater than 0')
})
// Clear bet
const clearBtn = document.querySelector('.clear');
clearBtn.addEventListener('click', () => {
playerBet = 0 ;
sumBetAmountBox.textContent = playerBet;
customBet.value = ''
})
// #######################################
// #######################################
// Draw cards
const playerCardsBox = document.querySelector('.player-cards');
const dealerCardsBox = document.querySelector('.dealer-cards');
let playerScoreBox = document.querySelector('.player-score');
let dealerScoreBox = document.querySelector('.dealer-score');
const drawCard = (currentPlayer,score) => {
const values = [2,3,4,5,6,7,8,9,10,'J','Q','K','A'];
const suits = ['C','D','H','S'];
const randomValuesIndex = Math.floor(Math.random() * values.length);
const randomSuitsIndex = Math.floor(Math.random() * suits.length);
const drawnValue = values[randomValuesIndex];
const drawnSuit = suits[randomSuitsIndex];
if (typeof drawnValue == 'number'){
score += drawnValue;
}
else {
// TODO exception
score += 10;
}
if (currentPlayer == 'player'){
playerCardsBox.innerHTML += `<img src="img/${drawnValue+drawnSuit}.png" alt="card" class="card slide-in">`
playerScoreBox.innerHTML = "15"; // -> doesn't update text !!!!!
playerScore = score;
}
else{
console.log(dealerScoreBox,dealerScoreBox.textContent);
dealerCardsBox.innerHTML += `<img src="img/${drawnValue+drawnSuit}.png" alt="card">`
dealerScoreBox.textContent = "5"; // -> doesn't update text !!!!!
dealerScore = score;
}
console.log(dealerScoreBox,dealerScoreBox.textContent); // -> result: element, "5" !!!!!
}
playerScoreBox.innerHTML = "77"; // -> works fine !!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blackjack</title>
<link rel="stylesheet" href="style/main.css">
<link rel="shortcut icon" href="#">
</head>
<body>
<div class="main">
<div class="dealer-cards">
<p class="score dealer-score"></p>
</div>
<div class="player-cards">
<div class="placed-bet hidden">
<img src="img/chip.png" alt="poker chip">
<p class="bet">1230$</p>
</div>
<p class="score player-score">11</p>
</div>
</div>
<div class="menu">
<div class="menu__side menu__side--front">
<p class="menu__balance-p">Balance: <span class="balance">500$</span></p>
<p class="menu__bet-p">Bet:</p>
<div class="menu__bet-amount">
<input type="number" class="custom-bet-amount" >
<a class="bet-amount">100</a>
<a class="bet-amount">250</a>
<a class="bet-amount">500</a>
<a class="bet-amount">1000</a>
<a class="bet-amount">All in</a>
<a class="clear">Clear</a>
<p>Your bet: <span class="player-bet">0$</span></p>
<button class="btn bet-btn">Bet</button>
</div>
</div>
<div class="menu__side menu__side--back">
<button class="hit btn btn--big">Hit</button>
<button class="stand btn btn--big">Stand</button>
<button class="double btn btn--big">Double</button>
<button class="split btn btn--big">Split</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap");
*,
*::after,
*::before {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
background-position: center;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.main {
padding: 5rem;
background-color: #121417;
border-radius: 7px 7px 0 0;
width: 1440px;
margin: 0 auto;
height: 900px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.main .dealer-cards,
.main .player-cards {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 2px solid white;
width: 20rem;
height: 20rem;
-ms-flex-item-align: center;
align-self: center;
border-radius: 50%;
}
.main .dealer-cards > img,
.main .player-cards > img {
width: 7rem;
-o-object-fit: cover;
object-fit: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.main .dealer-cards > img:not(:first-child),
.main .player-cards > img:not(:first-child) {
margin-left: .5rem;
}
.main .dealer-cards::before,
.main .player-cards::before {
position: absolute;
color: white;
bottom: 102%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.main .dealer-cards .score,
.main .player-cards .score {
color: white;
z-index: 100;
width: auto;
font-size: 1.2rem;
font-weight: 300;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 85%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.main .dealer-cards::before {
content: 'Dealer';
}
.main .player-cards::before {
content: 'You';
}
.main .player-cards .placed-bet {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 100%;
left: 80%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.main .player-cards .placed-bet img {
width: 3rem;
}
.main .player-cards .placed-bet p {
font-size: 1.5rem;
font-weight: bold;
color: #F6F7F8;
margin-left: .5rem;
}
.menu {
border: 2px solid #121417;
width: 1440px;
height: 7rem;
bottom: 0;
border-radius: 0 0 7px 7px;
position: relative;
}
.menu__side {
-webkit-transition: all .5s ease;
transition: all .5s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu__side--back {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
background-color: white;
}
.menu__balance-p {
font-weight: 300;
margin-right: 3rem;
}
.menu__balance-p span {
font-weight: 500;
}
.menu__bet-amount {
margin-left: .5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu__bet-amount input {
width: 3rem;
padding: .2rem;
}
.menu__bet-amount a {
background-color: #fdbfcd;
padding: .2rem 1rem;
border-radius: 2px;
margin-left: .5rem;
cursor: pointer;
}
.menu__bet-amount p {
font-weight: 300;
margin-left: 3rem;
}
.menu__bet-amount p span {
font-weight: 500;
}
.menu .btn {
margin-left: 1rem;
padding: .3rem 1.5rem;
background-color: #FF3366;
border: none;
color: white;
border-radius: 3px;
cursor: pointer;
}
.menu .btn--big {
padding: 1rem 3rem;
-webkit-transition: all .3s;
transition: all .3s;
outline: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 16px;
}
.menu .btn--big:hover {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.menu .btn--big:active {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.hidden {
visibility: hidden;
}
.swipe-front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.swipe-back {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/*# sourceMappingURL=main.css.map */
我认为你调用的那一刻
playerCardsBox.innerHTML +=
元素被重新创建，因此变量playerScoreBox指向一个不再存在的元素。你可以试着用进行研究
document.querySelector('.player-score').innerHTML = "15";