JavaScript \'score counter\' 跨网站上的各个页面工作

Question

我正在尝试将我的网站“游戏化”以吸引学习者。我对 JavaScript 仍然非常陌生，所以我提前道歉。有几十篇类似的文章，但没有一篇与我的需求密切相关，我已经尝试并未能解决其他类似问题 - 抱歉（我已经努力了！）

在大约 10 页的导航栏内，我想插入一个计数器。下面的代码使用 ID“score-counter”来执行此操作，我尝试使用 localStorage 来保留该学习者在每个页面上的分数。我已经设法让它工作（有点），但不是在原始值上加 10，而是创建一个全新的计数器并从头开始。

我希望每个按钮只能点击一次（每次页面刷新）所以我试图在点击每个按钮后删除 eventListener。我还想要一种直接的方法来向计数器系统添加更多按钮，因此我尝试将其保留在两个简单的类“增量按钮”和“首次单击”中。

<button class="first-click increment-button">Add 10 to the value!</button>
<div id="score-counter">0</div> <!-- DISPLAYS THE COUNT -->

let score = localStorage.getItem("score") || 0;
const incrementButtons = document.querySelectorAll(".increment-button");
const scoreCounter = document.getElementById("score-counter");
scoreCounter.textContent = score;

for (let button of incrementButtons) {
    button.addEventListener("click", function(){
        if(this.classList.contains("first-click")) {
            score += 10;
            localStorage.setItem("score", score);
            this.classList.remove("first-click");
        }
    });
}

---

输出目前一直这样做：201010101010

它成功保存了输出，但不是将值 10 添加到原始分数，而是创建一个全新的分数并再次从 0 开始。这有意义吗？

我尝试更改 JavaScript 以从 0 的值开始计数

let score = localStorage.getItem("score") || 0;

我也试过调整分数值

        if(this.classList.contains("first-click")) {
            score = scoreCounter + 10;

我曾尝试浏览各种 StackOverflow 和其他网络资源以解决类似问题，但一直难以找到适合我想要实现的目标的答案。谁能提供任何建议？提前致谢！

Answer 1

您需要将从localStorage.getItem 获取的字符串转换为数字。这可以通过 unary plus operator 来完成。

let score = +localStorage.getItem("score") || 0;