如何让篮球计分板的JavaScript增量函数独立计数不共用变量？

问题描述 #

在Scrimba的JS挑战中复刻篮球计分板，设计已完成，但实现加分按钮时遇到问题：

• 尝试用通用增量函数（通过传入元素ID指定队伍），但所有函数共用同一个points变量，切换队伍加分时分数互相叠加。
• 需要为两队设置独立分数变量，但不清楚如何让通用函数对应到正确的变量，要求用基础原生JS解决。

现有代码 #

HTML代码

<div class="container">
    <div class="column">
        <h3 class="title">HOME</h3>
        <h2 class="score" id="home-score">0</h2>
        <div>
            <button class="increment-btn" onclick="add1Point('home-score')">+1</button>
            <button class="increment-btn" onclick="add2Points('home-score')">+2</button>
            <button class="increment-btn" onclick="add3Points('home-score')">+3</button>
        </div>
    </div>
    <div class="column">
        <h3 class="title">GUEST</h3>
        <h2 class="score" id="guest-score">0</h2>
        <div>
            <button class="increment-btn" onclick="add1Point('guest-score')">+1</button>
            <button class="increment-btn" onclick="add2Points('guest-score')">+2</button>
            <button class="increment-btn" onclick="add3Points('guest-score')">+3</button>
        </div>
    </div>
</div>

原有JS代码

let points = 0

function add1Point(idValue){
    let teamId = document.getElementById(idValue)
    points += 1
    teamId.textContent = points
}
function add2Points(idValue){
    let teamId = document.getElementById(idValue)
    points += 2
    teamId.textContent = points
}
function add3Points(idValue){
    let teamId = document.getElementById(idValue)
    points += 3
    teamId.textContent = points
}

解决方案 #

方法1：用独立变量存储两队分数 #

定义两个全局变量分别记录主队和客队的分数，在通用函数中根据传入的ID判断操作哪个变量，更新后同步到DOM。

修改后的JS代码：

// 定义独立的分数变量
let homePoints = 0
let guestPoints = 0

// 合并成一个通用加分函数，减少冗余代码
function addPoints(teamId, pointsToAdd) {
    const scoreElement = document.getElementById(teamId)
    // 根据ID判断更新对应队伍的分数
    if (teamId === 'home-score') {
        homePoints += pointsToAdd
        scoreElement.textContent = homePoints
    } else if (teamId === 'guest-score') {
        guestPoints += pointsToAdd
        scoreElement.textContent = guestPoints
    }
}

同步修改HTML中的按钮点击事件，统一调用addPoints函数：

<!-- 主队按钮 -->
<button class="increment-btn" onclick="addPoints('home-score', 1)">+1</button>
<button class="increment-btn" onclick="addPoints('home-score', 2)">+2</button>
<button class="increment-btn" onclick="addPoints('home-score', 3)">+3</button>

<!-- 客队按钮 -->
<button class="increment-btn" onclick="addPoints('guest-score', 1)">+1</button>
<button class="increment-btn" onclick="addPoints('guest-score', 2)">+2</button>
<button class="increment-btn" onclick="addPoints('guest-score', 3)">+3</button>

方法2：直接从DOM读取当前分数计算（无需额外全局变量） #

如果不想维护额外的全局变量，可以每次从分数元素中读取当前值，转换为数字后加上增量，再写回DOM。这种方法更轻量化，避免全局变量管理问题。

修改后的JS代码：

function addPoints(teamId, pointsToAdd) {
    const scoreElement = document.getElementById(teamId)
    // 读取当前分数并转为数字，默认0避免初始值异常
    let currentScore = parseInt(scoreElement.textContent) || 0
    currentScore += pointsToAdd
    scoreElement.textContent = currentScore
}

HTML按钮事件同样修改为调用addPoints函数即可。

说明 #

• 方法1适合需要在其他逻辑中复用分数值的场景（比如添加重置功能、判断胜负），直接使用变量更方便。
• 方法2更简洁，无需维护额外状态，适合简单的计分场景，减少全局变量的使用。

内容的提问来源于stack exchange，提问作者Evanew