使用DOM递增HTML数字

Question

我正在玩一款Rock Paper Scissors游戏，当满足获胜条件时，我在增加分数时遇到了一些困难。

这是我想要增加的HTML分数

<h1>you : <span id = "playerScore">0</span></h1>

let playersScore = document.getElementById('playerScore');
function playersChoosesRock(){
if (playersChoice == ' Rock ' && computerChoice == ' Paper '){
playersScore.innerHTML = ++;
console.log('YOU LOSE');        
}

这是我的javascript代码，玩家选择Rock，计算机选择Paper。我想在HTML中增加我的0。如果有人能帮忙，我将不胜感激。

这是当我尝试使innerHTML='1'时弹出的错误

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

Answer 1

不能将innerHtml赋值给运算符，因为它需要一个值
您可以在JS中添加一个计数器，并将其值传递给innerHtml或innerText

检查此示例：

index.html

<h1>you <span id="playerScore">0</span></h1>
<button id="button">click</button>

app.js

let playerScore = document.getElementById("playerScore");
let button = document.getElementById("button");
let score = 0;
playerScore.innerHTML = score;
button.addEventListener("click", () => {
score++;
playerScore.innerHTML = score;
});