求助：Home与Guest计分按钮无法独立工作，计数互相干扰

问题根源 #

你当前的代码只用了一个count变量存储分数，Home和Guest的所有计分操作都修改这个变量，导致两组分数互相干扰；同时存在函数缺失、Reset功能不完整的问题。

修改后的完整代码 #

JavaScript 部分

const homeScreen = document.getElementById("home-screen");
const guestScreen = document.getElementById("guest-screen");
// 拆分独立的计分变量
let homeCount = 0;
let guestCount = 0;

// 初始化显示
homeScreen.textContent = homeCount;
guestScreen.textContent = guestCount;

// Guest组计分函数
const plusOne = () => {
  guestCount += 1;
  guestScreen.textContent = guestCount;
}

const plusTwo = () => {
  guestCount += 2;
  guestScreen.textContent = guestCount;
}

const plusThree = () => {
  guestCount += 3;
  guestScreen.textContent = guestCount;
}

// Home组计分函数（补全缺失的homeTwo、homeThree）
const homeOne = () => {
  homeCount += 1;
  homeScreen.textContent = homeCount;
}

const homeTwo = () => {
  homeCount += 2;
  homeScreen.textContent = homeCount;
}

const homeThree = () => {
  homeCount += 3;
  homeScreen.textContent = homeCount;
}

// 完善Reset功能：重置两组分数和显示
const reset = () => {
  homeCount = 0;
  guestCount = 0;
  homeScreen.textContent = homeCount;
  guestScreen.textContent = guestCount;
}

HTML 部分（修正按钮显示文本与重复ID）

<div class="container">
  <div class="d-flex justify-content-between bd-highlight mb-2">
      <div id="left">
        <h3 class="home">HOME</h3>
        <span id="home-screen" class="float-start rounded"></span>
        <div>
          <button onclick="homeOne()" class="btn btn-info">+1</button>
          <button onclick="homeTwo()" class="btn btn-info">+2</button>
          <button onclick="homeThree()" class="btn btn-info">+3</button>
        </div>
      </div>
      <div><button onclick="reset()" class="btn reset">Reset</button></div>
      <div id="right"> <!-- 修正重复的id="left"，避免DOM选择冲突 -->
        <h3 class="text">GUEST</h3>
        <span id="guest-screen" class="float-end rounded"></span>
        <div>
          <button onclick="plusOne()" class="btn">+1</button>
          <button onclick="plusTwo()" class="btn">+2</button>
          <button onclick="plusThree()" class="btn">+3</button>
        </div>
      </div>
  </div>
  
  <div class="row">
    <div class="row">
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="row">
          <div class="col-sm-5"></div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 拆分独立变量：用homeCount和guestCount分别管理两组分数，彻底避免互相干扰
• 补全缺失函数：实现了HTML中调用但未定义的homeTwo、homeThree函数
• 完善Reset功能：同时重置两个计分变量和对应的屏幕显示，确保所有状态回到初始值
• 修正HTML问题：修改了重复的id="left"为id="right"，并修正按钮显示文本使其匹配功能

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