是否有一个更干净的方式来增加我的最终分数，而不引用完整的模板文字在我的函数每次?

Question

JS初学者这里，做石头剪刀布的事情，我试图增加我的最终分数。

为此，我声明了我的user/comp分数:

let compScore = 0;
let userScore = 0;

我已经得到了结果显示:

let body = document.querySelector('body');
let result = document.createElement('div');
result.className = 'result';
result.textContent = `YOUR SCORE ${userScore}  :: COMPUTER SCORE  ${compScore}`;
body.appendChild(result);

然后我做了播放和比较逻辑:

document.getElementById("rock").addEventListener('click', ()=>{gameRound('Rock')});
document.querySelector(".paper").addEventListener('click', ()=>{gameRound('Paper')});
document.getElementById("scissors").addEventListener('click', ()=>{gameRound('Scissors')});
function compPlay() {
return options[Math.floor(Math.random() * options.length)];
}
function gameRound(userAns, compAns) {
alert(`${userAns}, eyy? Let's see what the computer chose..'`);
userAns= userAns.toLowerCase();
compAns=compPlay().toLowerCase();
alert('Computer answered ' + compAns + '.');
if (userAns==compAns) {
alert('Draw');
} else if ((userAns==="rock" && compAns==="scissors") ||
(userAns==="scissors" && compAns==="paper") ||
(userAns==="paper" && compAns==="rock")) {
result.textContent = `YOUR SCORE ${userScore+=1}  :: COMPUTER SCORE  ${compScore}`;
} else {
result.textContent = `YOUR SCORE ${userScore}  :: COMPUTER SCORE  ${compScore+=1}`;
}
}

笨拙的代码，(即使我在这个阶段也知道!)但我的意思是，嘿，它跑起来了!

我只是想知道是否有一个更干净的方法/更好的实践来增加用户/比较分数，而不更新if/else语句中的整个结果html类，因为我认为我现在正在与范围斗争。我尝试返回:

compAns++  AND  compAns +=1

在gameRound()函数中，但不确定如何让它增加，因为它一直显示0，大概是因为它只是在全局作用域中显示声明的变量。

感谢您的宝贵时间。

Answer 1

目前您可以动态地为分数添加HTML，但是为什么不在页面的初始HTML中创建它，并在实际分数应该输出的地方插入两个span元素:

<div>
Your score: <span id="userscore">0</span> :: Computer score: <span id="compscore">0</span>
</div>

现在您可以专门针对这些span元素来输出单个分数。将分数的增量与分数的实际显示分开。像这样:

} else if (.......) {
userScore++;
} else {
compScore++;
}
userScoreSpan.textContent = userScore;
compScoreSpan.textContent = compScore;

不是你的问题，但如果你定义options数组如下:

const options = ["rock", "paper", "scissors"];

…然后注意，后面的值我的选择(轮询)将战胜我。我们可以在if条件下使用它。

我也不会使用alert，因为过了一段时间它变得非常烦人，但我没有触摸那部分。以下是修改后的代码:

const options = ["rock", "paper", "scissors"];
let compScore = 0;
let userScore = 0;
let body = document.querySelector('body');
let userScoreSpan = document.getElementById('userscore');
let compScoreSpan = document.getElementById('compscore');
document.getElementById("rock").addEventListener('click', ()=>{gameRound('Rock')});
document.getElementById("paper").addEventListener('click', ()=>{gameRound('Paper')});
document.getElementById("scissors").addEventListener('click', ()=>{gameRound('Scissors')});
function compPlay() {
return options[Math.floor(Math.random() * options.length)];
}
function gameRound(userAns) {  // should not be a 2nd argument
let compAns; // define here.
alert(`${userAns}, eyy? Let's see what the computer chose..'`);
userAns = userAns.toLowerCase();
compAns = compPlay().toLowerCase();
alert('Computer answered ' + compAns + '.');
if (userAns == compAns) {
alert('Draw');
} else if (options[(options.indexOf(userAns) + 1) % 3] === compAns) {
compScore++;
} else {
userScore++;
}
userScoreSpan.textContent = userScore;
compScoreSpan.textContent = compScore;
}

<button id="rock">Rock</button><button id="paper" class="paper">Paper</button><button id="scissors">Scissors</button>
<div>
Your score: <span id="userscore">0</span> :: Computer score: <span id="compscore">0</span>
</div>