我试图改变一个if语句内的文本值，但它不工作，我认为我使用错误的逻辑

Question

所以我已经做了这个代码，当我点击检查按钮，它改变消息的文本每次，取决于在猜变量输入的数字。

虽然我在开始时声明变量然后使用它们的逻辑对我来说似乎很好，但它不起作用有人能解释一下为什么我的逻辑是错的吗?

// for example i declared 
let message = document.querySelector('.message').textContent;
//and then i used message inside if to change the text
message = '‼ Type a Number';

为什么这是错误的?

document.querySelector('.check').addEventListener('click', function () {
let score = 20;
const guess = Number(document.querySelector('.guess').value);
let message = document.querySelector('.message').textContent;
if (!guess) {
message = '‼ Type a Number';
} else if (secretNumber === guess) {
message = 'You Won 🥳';
} else if (secretNumber < guess) {
message = 'It is a lower Number!';
score += -1;
document.querySelector('.score').textContent = score;
} else if (secretNumber > guess) {
message = 'It is a higher Number!';
score += -1;
document.querySelector('.score').textContent = score;
}
});

Answer 1

您的问题(或两个跳出我)是每次运行函数时都重新定义score。也就是说，每次点击按钮，score被重置为20，并且只能根据用户的输入取20或19的值。另一个问题是你永远不会重新分配.message元素的textContent。

要解决这个问题，只需将score的声明移出函数并添加额外的消息重分配行，如下所示:

let score = 20;
document.querySelector(".check").addEventListener("click", function() {
// the 'let score' line has been removed from in here
const guess = Number(document.querySelector('.guess').value);
let message = document.querySelector('.message').textContent;
// Rest of your code ...
document.querySelector(".message").textContent = message;
});

还要注意(正如Bravo指出的)，+=和-的使用是重叠的——你应该只使用带减法的复合赋值运算符(即score -= 1而不是score += -1)。这也适用于其他运算符，如乘法*=和除法/=。