html 我在这里做错了什么？计数被存储并转移到另一组按钮

fjaof16o 于 2023-01-07 发布在其他

关注(0)|答案(1)|浏览(136)

我一直在挣扎这个，请你能帮助吗？这里是代码。我想组按钮工作相互独立。例如，如果我按下主页按钮，计数不应该转移到客人按钮。它应该从零开始时，单击，但它计数什么已经存储在变量之前，它被单击。

const homeScreen = document.getElementById("home-screen");
const guestScreen = document.getElementById("guest-screen");
let count = 0;

homeScreen.textContent = 0;
guestScreen.textContent = 0;

const plusOne = () => {
  count += 1;
  
    guestScreen.textContent = count;
  
}

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

const plusThree = () => {
  count += 3;
  let result = guestScreen.textContent = count;
  if (result.length !== 0) {
    return result;
  }
}

const reset = () => {
  guestScreen.textContent = 0;
}

const homeOne = () => {
  count += 1;
  homeScreen.textContent = count;
  
  console.log("Clicked Home");
}

<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">+1</button>
          <button onclick="homeThree()" class="btn btn-info">+1</button>
          </div>
      </div>
    <div><Button onclick="reset()" class="btn reset">Reset</Button> </div>
      <div id="left">
        <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 ">+1</button>
          <button onclick="plusThree()" class="btn ">+1</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>

Html

来源：https://stackoverflow.com/questions/74999959/what-am-i-doing-wrong-here-the-count-is-being-stored-and-transferred-to-the-oth

1条答案

按热度按时间

zyfwsgd61#

然后使用两个不同变量：homeCount和guestCount。

const homeScreen = document.getElementById("home-screen");
const guestScreen = document.getElementById("guest-screen");
let homeCount = 0;
let guestCount = 0;

homeScreen.textContent = 0;
guestScreen.textContent = 0;

const plusOne = () => {
  guestCount += 1;
  guestScreen.textContent = guestCount;
}

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

const plusThree = () => {
  guestCount += 3;
  guestScreen.textContent = guestCount;
  
  // Unclear what was attempted here...
  // let result = guestScreen.textContent = guestCount;
  // if (result.length !== 0) {
  //   return result;
  // }
}

const reset = () => {
  guestScreen.textContent = 0;
}

const homeOne = () => {
  homeCount += 1;
  homeScreen.textContent = homeCount;
}

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

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

<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="left">
        <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>

赞(0）回复(0）举报 2023-01-07

我来回答

html 我在这里做错了什么？计数被存储并转移到另一组按钮

1条答案

相关问题

热门标签

最新问答