Javascript 计数器没有'；t在html页面中更改其值

我把

playerScore

和

computerScore

变量放在全局范围内。当用户赢或输时，这些值会增加一个数字。他们做得很好。但在我的HTML页面中，它们不会动态变化。 为什么当我控制台时，我的

playerScore

和

computerScore

值在我的HTML页面中没有更改。将它们分别记录在控制台中它们会更改，但不会在HTML页面中更改。我试着让它们发挥作用，但没有达到预期效果

// Selecting all the items with tag button
const buttons = document.querySelectorAll('button');

// Returns random item and assignes it to computerSelection variable
function computerPlay() {
    const rps = ['rock', 'paper', 'scissors'];
    let numberItem = Math.floor(Math.random() * rps.length);
    computerSelection = rps[numberItem];
    if (computerSelection === 'rock') {
        console.log('computer selections is rock');
        return computerSelection;
    } 
    else if (computerSelection === 'paper' ) {
        console.log('It is a paper!');
        return computerSelection;
    }  
    console.log('it is scissors');
    return computerSelection;
}

// Plays game only five rounds;
let computerScore = 0;
let playerScore = 0;

function playRound(playerSelection, computerSelection) {

if(playerScore < 5 && computerScore < 5 ) {
    if(((playerSelection == 'rock') && (computerSelection == 'paper')) || ((playerSelection == 'paper') && (computerSelection == 'scissors')) || 
    ((playerSelection == 'scissors') && (computerSelection == 'rock') )) {
        console.log(`${computerSelection} beats ${playerSelection} the ROBOT WINS!`);
        playerScore++;
        return console.log(playerScore);
    } 
    else if (((playerSelection == 'rock') && (computerSelection == 'scissors')) || ((playerSelection == 'paper') && (computerSelection == 'rock')) || 
    ((playerSelection == 'scissors') && (computerSelection == 'paper'))) {
        console.log(` ${playerSelection}  beats ${computerSelection} the PLAYER WINS!`);
        computerScore++;
        return console.log(computerScore);
    }
    return console.log('It is a DRAW');;
    
} 

return console.log("GAME OVER!!!");
}

// returns value of clicked button and plays round
function fetchButtonValue(e) {
    let itemClicked = e.target.dataset.item;
    console.log(` THIS WAS CLICKED ${itemClicked}`);
    return playRound(itemClicked, computerPlay());
} 

// uses fetchButtonValue 
buttons.forEach(function(button) {
    button.addEventListener('click', fetchButtonValue);
});

// implement the vlaues to HTML but they doesn't change but the value changes when tracking them in console of browser. 

let score= `
<p class = 'playerPoints'>Player: ${playerScore}</p>
<p class = 'computerPoints'>Computer: ${computerScore}</p>
`;

const divScore = document.querySelector('.score');
divScore.insertAdjacentHTML('beforebegin', scoreHTML);

//使用标记按钮选择所有项目
const buttons=document.queryselectoral（'button'）；
//返回随机项并将其分配给computerSelection变量
函数computerPlay（）{
常量rps=[‘石头’、‘布’、‘剪刀’]；
设numberItem=Math.floor（Math.random（）*rps.length）；
computerSelection=rps[numberItem]；
如果（计算机选择==='rock'）{
console.log（“计算机选择是摇滚乐”）；
返回计算机选择；
} 
else if（计算机选择===‘纸张’）{
log（'这是一张纸！'）；
返回计算机选择；
}  
console.log（“它是剪刀”）；
返回计算机选择；
}
//只打五局；
让计算机得分=0；
让playerScore=0；
功能playRound（玩家选择、计算机选择）{
如果（playerScore<5&&computerScore<5）{
如果（（playerSelection='rock'）&&（computerSelection='paper'））| |（（playerSelection='paper'）&&（computerSelection='scissors'））| |
（（playerSelection==“剪刀”）&&（computerSelection==“石头”））{
log（`computerSelection}击败${playerSelection}机器人获胜！`）；
playerScore++；
返回控制台.log（playerScore）；
} 
否则如果（（玩家选择='rock'）&&（电脑选择='Scissor'））| |（（玩家选择='paper'）&&（电脑选择='rock'））| |
（（playerSelection==“剪刀”）&&（computerSelection==“纸”））{
log（`playerSelection}击败${computerSelection}玩家获胜！`）；
计算机评分++；
返回控制台日志（computerScore）；
}
return console.log（'It is DRAW'）；；
} 
返回console.log（“游戏结束！！！”；
}
//返回单击按钮的值并进行循环播放
函数fetchButtonValue（e）{
让itemClicked=e.target.dataset.item；
log（`THIS WAS CLICKED${itemClicked}`）；
返回playRound（单击项，computerPlay（））；
} 
//使用fetchButtonValue
按钮。forEach（功能（按钮）{
addEventListener（'click'，fetchButtonValue）；
});
//将vlaues实现为HTML，但它们不会更改，但在浏览器控制台中跟踪它们时，值会更改。
让分数=`
玩家：${playerScore}
计算机：${computerScore}
`;
const divScore=document.querySelector（'.score'）；
insertAdjacentHTML（'beforebeagin'，scoreHTML）；

您使用的是反应式框架还是纯js和html？欢迎使用stack overflow！当变量改变时，html元素不会动态改变，而是保持原样。每次更改变量si am时都需要更新元素