JavaScript实现计分框数值独立递增 避免分数联动

所有加分函数共用了同一个全局变量i计数：var声明的变量没有块级作用域，你写了6次var i = 0本质是重复声明同一个全局变量，不会为每个函数创建独立的计数空间。不管点击主队还是客队的加分按钮，修改的都是同一个i的值，自然会出现两个队伍分数联动错乱的问题。

提供两种实现方式，可根据需求选择：

方案1：最小改动修复（保留原有HTML结构） #

只需要把全局共享的i拆分为主队、客队两个独立的计数变量，每个队伍的加分函数只修改自己对应的计数变量即可，替换原有JS代码为如下内容：

var homescore = document.getElementById('home-score')
var guestscore = document.getElementById('guest-score')

// 主队独立分数变量
var homeScore = 0; 
function add1() {           
    homeScore++;       
    homescore.textContent = homeScore
}
function add2() {
    homeScore += 2
    homescore.textContent = homeScore
}
function add3() {
    homeScore += 3
    homescore.textContent = homeScore
}

// 客队独立分数变量
var guestScore = 0; 
function add1g() {           
    guestScore++;       
    guestscore.textContent = guestScore
}
function add2g() {
    guestScore += 2
    guestscore.textContent = guestScore
}
function add3g() {
    guestScore += 3
    guestscore.textContent = guestScore
}

方案2：精简优化版（易维护、代码量少） #

不需要为每个按钮写单独的加分函数，通过一个通用加分函数+批量事件绑定的方式实现逻辑复用，同时修复原HTML中id重复、内联事件冗余的问题。

优化后JS代码 #

// 获取分数显示元素
const homeScoreEl = document.getElementById('home-score')
const guestScoreEl = document.getElementById('guest-score')

// 独立维护两个队伍的分数
const teamScore = {
  home: 0,
  guest: 0
}

/**
 * 通用加分逻辑
 * @param {string} team 队伍标识 home/guest
 * @param {number} point 加分数值 1/2/3
 */
function addPoint(team, point) {
  teamScore[team] += point
  const targetEl = team === 'home' ? homeScoreEl : guestScoreEl
  targetEl.textContent = teamScore[team]
}

// 批量为按钮绑定事件，无需在HTML写onclick
document.querySelectorAll('.left-side button').forEach(btn => {
  const point = Number(btn.textContent.replace('+', ''))
  btn.addEventListener('click', () => addPoint('home', point))
})
document.querySelectorAll('.right-side button').forEach(btn => {
  const point = Number(btn.textContent.replace('+', ''))
  btn.addEventListener('click', () => addPoint('guest', point))
})

优化后HTML代码（移除重复id、内联事件） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BasketBall Score Board</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <div class="left-side">
      <h1 class="left-title">HOME</h1>
      <br />
      <h1 class="home-score" id="home-score">0</h1>
      <button>+1</button>
      <button>+2</button>
      <button>+3</button>
    </div>
    <div class="right-side">
      <h1 class="right-title">GUEST</h1>
      <br />
      <h1 class="guest-score" id="guest-score">0</h1>
      <button>+1</button>
      <button>+2</button>
      <button>+3</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

• 主客队分数完全独立计数，点击任意队伍的加分按钮只会修改对应队伍的分数，不会出现联动问题
• 精简版代码逻辑复用率高，后续扩展重置比分、扣分、节次计分等功能时，只需要修改少量代码
• 修复了原HTML中id重复的规范问题，移除了耦合度高的内联事件绑定，代码结构更清晰

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