我正在尝试"游戏化"我的网站来吸引学习者。我对JavaScript还是一个令人难以置信的新手，所以我提前道歉。有几十篇类似的文章，但没有一篇能很好地满足我的需求，我也尝试过，但没有解决其他类似的问题-对不起（我已经很努力了!）
在大约10页的导航栏中，我想插入一个计数器。下面的代码使用ID "score-counter"来完成这一操作，我尝试使用localStorage来保留该学员在每一页中的分数。我设法让它工作（某种程度上），但它不是在原始值上添加10，而是创建一个全新的计数器，从头开始。
我希望每个按钮只能点击一次（每次页面刷新），所以我尝试在每个按钮被点击后删除eventListener。我还希望以直接的方式向计数器系统添加更多按钮，所以我尝试将其保留为两个简单的类'increment-button'和'first-click'。

<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和其他网络资源寻找类似的问题，但一直很难找到任何适合我试图实现的答案。有人能提供任何建议吗？提前感谢!