如何在选择的选项值处停止计数？

问题描述 投票：0回答：2

我是 javascript 的初学者，我正在做一个简单的乒乓球记分器。这里的问题是，每当“playerOneScore”或“playerTwoScore”达到选择标签的值（“scoreLimit”）时，我想禁用“buttonOne”和“buttonTwo”。

我尝试在 if 标签上使用像 7 这样的整数，它似乎是这样工作的，所以我猜测这可能是变量“scoreLimit”范围或类似的问题。当 ScoreOne 或 ScoreTwo 达到极限时，我也遇到了问题，因为我希望按钮在后者发生时禁用，但我必须再按一次才能正常工作。

HTML

<!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>scoreKeeper - JS</title>
    <link rel="stylesheet" href="scoreKeeper.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

</head>

<body>

    <div id="imageDiv">
        <img src="https://media.istockphoto.com/id/503250996/photo/ping-pong-or-table-tennis-background-with-rackets.jpg?s=612x612&w=0&k=20&c=XSTF2456Iq81RxL_D887ikZOpyfEtUgEpPZGfTKrwRI="
            alt="tableTennisImage">
    </div>

    <div id="title">
        <h3>Ping Pong Score Keeper</h3>
    </div>

    <div id="scoreDiv">
        <div id="scoreKeep">
            <h1 id="uno">0</h1>
            <h1 id="dos">to</h1>
            <h1 id="tres">0</h1>
        </div>

        <p>Use the buttons below to keep the score</p>
        <label for="limitOptions" id="limiterLabel">Playing To</label>
        <select name="limitOptions" id="scoreLimiter">
            <option value="7">7</option>
            <option value="11">11</option>
            <option value="21">21</option>
        </select>
        <div id="buttons">
            <button id="sumPlayerOne">1+ Player One</button>
            <button id="sumPlayerTwo">1+ Player Two</button>
            <button id="reset">Reset</button>
        </div>
    </div>

    <script src="scoreKeeper.js"></script>
</body>

</html>

JAVASCRIPT

const buttonOne = document.querySelector("#sumPlayerOne");
const buttonTwo = document.querySelector("#sumPlayerTwo");
const resetear = document.querySelector("#reset")
const playerOneScore = document.querySelector("#uno")
let scoreLimit = document.querySelector("#scoreLimiter").value;
const playerTwoScore = document.querySelector("#tres")

let scoreOne = 0;
let scoreTwo = 0;

buttonOne.addEventListener("click", (e) => {
     scoreLimit = document.querySelector("#scoreLimiter").value;
    if (scoreOne === scoreLimit) {
        buttonTwo.disabled = true;
        buttonOne.disabled = true;
        document.getElementById("uno").style.color = "green";
        document.getElementById("tres").style.color = "red";

    }
    else {
        const winOne = () => {

            scoreOne = scoreOne + 1;
            playerOneScore.innerText = `${scoreOne}`
        }
        winOne()
    }
});

buttonTwo.addEventListener("click", (e) => {
     scoreLimit = document.querySelector("#scoreLimiter").value;
    console.log(scoreLimit)
    if (scoreTwo === scoreLimit) {
        buttonTwo.disabled = true;
        buttonOne.disabled = true;
        document.getElementById("uno").style.color = "red"
        document.getElementById("tres").style.color = "green"
    }
    else {
        const winTwo = () => {
            scoreTwo = scoreTwo + 1;
            playerTwoScore.innerText = `${scoreTwo}`
        }
        winTwo()
    }
});

resetear.addEventListener("click", (e) => {
    scoreOne = 0
    scoreTwo = 0
    playerOneScore.innerText = `${scoreOne}`
    playerTwoScore.innerText = `${scoreTwo}`
    buttonOne.disabled = false;
    buttonTwo.disabled = false;
    document.getElementById("uno").style.color = "black"
    document.getElementById("tres").style.color = "black"
})

CSS

* {
    box-sizing: border-box;
}

body{
    font-family: roboto;
    font-weight: 600;
}

#imageDiv {
display: flex;
justify-content: center;
}

img {
width: 25rem;
border-radius: 10px;
}

#title{
    margin-top: 1rem;
    margin-bottom: 10px;
    padding-left: 1rem;
    border: 1px solid lightgray;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 10px ;
}

#scoreDiv {
border: 1px solid lightgray;
padding-left: 1rem;
padding-bottom: 1rem;
border-radius: 10px ;
margin-left: 5px;
margin-right: 5px;
}

#scoreLimiter{
    font-family: roboto;
    font-size: 17px;
}

#sumPlayerOne{
    font-family: roboto;
}

#sumPlayerTwo{
    font-family: roboto;
}

#reset{
    font-family: roboto;
}

#limiterLabel{
font-size: 20px;
} 

#buttons{
    margin-top: 1rem;
}

#scoreKeep{
    display: flex;

    font-size: 20px;
}
#uno{
    transition: .1s;
    margin-right: 1.33rem;
    
}

#dos{
    transition: .1s; 
    margin-right: 1.33rem;
}

#tres{
    transition: .1s;
}
javascript html
2个回答
1
投票

你可以使用一个函数来检查每个玩家的分数是否已达到限制，并在每次将分数相加时调用该函数，就像这样

const buttonOne = document.querySelector("#sumPlayerOne");
const buttonTwo = document.querySelector("#sumPlayerTwo");
const resetear = document.querySelector("#reset")
const playerOneScore = document.querySelector("#uno")
let scoreLimit = document.querySelector("#scoreLimiter").value;
const playerTwoScore = document.querySelector("#tres")

let scoreOne = 0;
let scoreTwo = 0;

buttonOne.addEventListener("click", (e) => {
    scoreLimit = document.querySelector("#scoreLimiter").value;
    
    const winOne = () => {

      scoreOne = scoreOne + 1;
      playerOneScore.innerText = `${scoreOne}`
    }
    winOne()
    checkLimit(scoreOne, 1);
    
});

buttonTwo.addEventListener("click", (e) => {
    scoreLimit = document.querySelector("#scoreLimiter").value;
    
    const winTwo = () => {
      scoreTwo = scoreTwo + 1;
      playerTwoScore.innerText = `${scoreTwo}`
    }
    winTwo()
    checkLimit(scoreTwo, 2);
    
});

resetear.addEventListener("click", (e) => {
    scoreOne = 0
    scoreTwo = 0
    playerOneScore.innerText = `${scoreOne}`
    playerTwoScore.innerText = `${scoreTwo}`
    buttonOne.disabled = false;
    buttonTwo.disabled = false;
    document.getElementById("uno").style.color = "black"
    document.getElementById("tres").style.color = "black"
})

function checkLimit(score, player){
    scoreLimit = document.querySelector("#scoreLimiter").value;
    if(score == scoreLimit){
        buttonTwo.disabled = true;
        buttonOne.disabled = true;
        let player1 = "green";
        let player2 = "red";
        if(player==2){
          player1 = "red";
          player2 = "green";
        }
        document.getElementById("uno").style.color = player1;
        document.getElementById("tres").style.color = player2;
  }

}
* {
  box-sizing: border-box;
}

body {
  font-family: roboto;
  font-weight: 600;
}

#imageDiv {
  display: flex;
  justify-content: center;
}

img {
  width: 25rem;
  border-radius: 10px;
}

#title {
  margin-top: 1rem;
  margin-bottom: 10px;
  padding-left: 1rem;
  border: 1px solid lightgray;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
}

#scoreDiv {
  border: 1px solid lightgray;
  padding-left: 1rem;
  padding-bottom: 1rem;
  border-radius: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

#scoreLimiter {
  font-family: roboto;
  font-size: 17px;
}

#sumPlayerOne {
  font-family: roboto;
}

#sumPlayerTwo {
  font-family: roboto;
}

#reset {
  font-family: roboto;
}

#limiterLabel {
  font-size: 20px;
}

#buttons {
  margin-top: 1rem;
}

#scoreKeep {
  display: flex;
  font-size: 20px;
}

#uno {
  transition: .1s;
  margin-right: 1.33rem;
}

#dos {
  transition: .1s;
  margin-right: 1.33rem;
}

#tres {
  transition: .1s;
}
<!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>scoreKeeper - JS</title>
  <link rel="stylesheet" href="scoreKeeper.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

</head>

<body>

  <div id="imageDiv">
    <img src="https://media.istockphoto.com/id/503250996/photo/ping-pong-or-table-tennis-background-with-rackets.jpg?s=612x612&w=0&k=20&c=XSTF2456Iq81RxL_D887ikZOpyfEtUgEpPZGfTKrwRI=" alt="tableTennisImage">
  </div>

  <div id="title">
    <h3>Ping Pong Score Keeper</h3>
  </div>

  <div id="scoreDiv">
    <div id="scoreKeep">
      <h1 id="uno">0</h1>
      <h1 id="dos">to</h1>
      <h1 id="tres">0</h1>
    </div>

    <p>Use the buttons below to keep the score</p>
    <label for="limitOptions" id="limiterLabel">Playing To</label>
    <select name="limitOptions" id="scoreLimiter">
      <option value="7">7</option>
      <option value="11">11</option>
      <option value="21">21</option>
    </select>
    <div id="buttons">
      <button id="sumPlayerOne">1+ Player One</button>
      <button id="sumPlayerTwo">1+ Player Two</button>
      <button id="reset">Reset</button>
    </div>
  </div>

  <script src="scoreKeeper.js"></script>
</body>

</html>

0
投票

首先增加分数，然后检查胜利，您还使用三重等于 

===
来比较整数和作为字符串的输入值，这总是返回 false，因为 
===
检查值并类型，要进行比较，您必须使用 2 equals 
==
或使用 
parseInt

将字符串转换为 int 
 const buttonOne = document.querySelector("#sumPlayerOne");
      const buttonTwo = document.querySelector("#sumPlayerTwo");
      const resetear = document.querySelector("#reset");
      const playerOneScore = document.querySelector("#uno");
      let scoreLimit = document.querySelector("#scoreLimiter").value;
      const playerTwoScore = document.querySelector("#tres");

      let scoreOne = 0;
      let scoreTwo = 0;

      buttonOne.addEventListener("click", (e) => {
        scoreOne++;
        playerOneScore.innerHTML = scoreOne;

        if (scoreOne === parseInt(scoreLimit)) {
          buttonTwo.disabled = true;
          buttonOne.disabled = true;
          document.getElementById("uno").style.color = "green";
          document.getElementById("tres").style.color = "red";
        }
      });

      buttonTwo.addEventListener("click", (e) => {
        scoreTwo++;
        playerTwoScore.innerHTML = scoreTwo;

        if (scoreTwo === parseInt(scoreLimit)) {
          buttonTwo.disabled = true;
          buttonOne.disabled = true;
          document.getElementById("uno").style.color = "red";
          document.getElementById("tres").style.color = "green";
        }
      });

      resetear.addEventListener("click", (e) => {
        scoreOne = 0;
        scoreTwo = 0;
        playerOneScore.innerText = `${scoreOne}`;
        playerTwoScore.innerText = `${scoreTwo}`;
        buttonOne.disabled = false;
        buttonTwo.disabled = false;
        document.getElementById("uno").style.color = "black";
        document.getElementById("tres").style.color = "black";
      });
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.