How to compare this two variables?

Question

I am new to programming. I'm trying to code some kind of scorekeeper in JS. How can I compare two variables: pointOne with maxScore?

I want to have something like this: If pointOne === maxScore -> Player1 wins and game is over. Currently, this part of the code cannot compare this variable.

This is my code:

const maxInput = document.querySelector('#number');

maxInput.addEventListener('input', function() {

  let maxScore = number.value;
  maxScore = parseInt(this.value);
  console.log(`Max score is ${maxScore}`);


  // if (pointOne === 3){
  //     console.log("mamy 3!");
  // }
})

function headerUpdate() {
  const header = document.querySelector('h1');
  header.innerText = `${pointOne} to ${pointTwo}`;
}


let pointOne = 0;
let pointTwo = 0;

function addPoints() {
  const buttonClickTrue = document.getElementById('btn_one');
  const buttonClickTrue2 = document.getElementById('btn_two');
  const resetButtonTrue = document.getElementById('btn_reset');

  buttonClickTrue.addEventListener('click', function() {
    pointOne++;
    console.log(`Your score is ${pointOne}`);
    headerUpdate();

  })

  buttonClickTrue2.addEventListener('click', function() {
    pointTwo++;
    console.log(`Second score is ${pointTwo}`);
    headerUpdate();

  })

  resetButtonTrue.addEventListener('click', function() {
    window.location.reload(true);
  })

}

addPoints();

* {
  box-sizing: border-box;
  margin: 2px;
  padding: 0;
  background-color: #7c86ac;
}

.game-box {
  height: 30%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#tenis {
  width: 30%;
  margin-top: 30px;
}

#btn_one {
  background-color: green;
  border: 3px solid black;
  width: 30%;
}

#btn_two {
  background-color: orangered;
  border: 3px solid black;
  width: 30%;
}

#btn_reset {
  background-color: red;
  border: 3px solid black;
  width: 30%;
}

#number {
  background-color: white;
  border: 3px solid black;
  width: 5%;
}

<div class="game-box">
  <img src="./img/tenis_image.jpg" alt="tenis" id="tenis">
  <h2>Score Keeper</h2>
  <h1>0 to 0</h1>
  <h3>Use button bellow to count</h3>
  <p id="max">Playing to</p>
  <input type="number" name="number" id="number">
  <button id="btn_one">+1 Player One</button>
  <button id="btn_two">+1 Player Two</button>
  <button id="btn_reset">Reset</button>
</div>

TechySharnav · Answer 1 · 2021-04-03T15:56:04.343

I have modified your code. Declare the pointOne and pointTwo vars globally using var so that you can access them anywhere in code. I also did same for maxScore.

Now I put that if condition, inside click event listeners for the playerOne button. It works for it.

const maxInput = document.querySelector('#number');

let  pointOne = 0;
let  pointTwo = 0;
let maxScore = 0;

maxInput.addEventListener('input', function() {

  maxScore = maxInput.value;
  maxScore = parseInt(maxScore);
  console.log(`Max score is ${maxScore}`);



})


function headerUpdate() {
  const header = document.querySelector('h1');
  header.innerText = `${pointOne} to ${pointTwo}`;
}




function addPoints() {
  const buttonClickTrue = document.getElementById('btn_one');
  const buttonClickTrue2 = document.getElementById('btn_two');
  const resetButtonTrue = document.getElementById('btn_reset');

  buttonClickTrue.addEventListener('click', function() {
    pointOne++;
    console.log(`Your score is ${pointOne}`);
    headerUpdate();
    if (pointOne === maxScore) {
      console.log("mamy 3!");
    }
  })

  buttonClickTrue2.addEventListener('click', function() {
    pointTwo++;
    console.log(`Second score is ${pointTwo}`);
    headerUpdate();

  })

  resetButtonTrue.addEventListener('click', function() {
    window.location.reload(true);
  })


}

addPoints();

* {
  box-sizing: border-box;
  margin: 2px;
  padding: 0;
  background-color: #7c86ac;
}

.game-box {
  height: 30%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#tenis {
  width: 30%;
  margin-top: 30px;
}

#btn_one {
  background-color: green;
  border: 3px solid black;
  width: 30%;
}

#btn_two {
  background-color: orangered;
  border: 3px solid black;
  width: 30%;
}

#btn_reset {
  background-color: red;
  border: 3px solid black;
  width: 30%;
}

#number {
  background-color: white;
  border: 3px solid black;
  width: 5%;
}

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Score Keeper</title>
</head>

<body>

  <div class="game-box">
    <img src="./img/tenis_image.jpg" alt="tenis" id="tenis">
    <h2>Score Keeper</h2>
    <h1>0 to 0</h1>
    <h3>Use button bellow to count</h3>
    <p id="max">Playing to</p>
    <input type="number" name="number" id="number">
    <button id="btn_one">+1 Player One</button>
    <button id="btn_two">+1 Player Two</button>
    <button id="btn_reset">Reset</button>

  </div>






  <script src="./app.js"></script>

</body>

</html>

If you want to over the game, remove all the event listeners, using `elem.removeEventListener()`. — TechySharnav, Apr 03 '21 at 12:02
I believe that's a bad practise, especially since he's using the var keyword and populating the global namespace. Here's an accepted answer: https://stackoverflow.com/a/66931390/10233884 — Edison Pebojot, Apr 03 '21 at 12:59

Edison Pebojot · Accepted Answer · 2021-04-04T02:30:40.910

Given the accepted answers above, I believe that's a bad practise, especially since he's using the var keyword and populating the global namespace. Read this another Stackoverflow answer and why using global variable is bad (here). Why not use ES6's const or let. You're using an Event Bus Architecture with this code below, so you're avoiding unnecessary complexity and keeping your code out of global namespace:

// Event Bus Architecture
window.addEventListener('click', Button.bind(this));
window.addEventListener('input', Max.bind(this));

function Button(event) {
    const p1 = document.getElementById("p1");
    const p2 = document.getElementById("p2");
    event.path[0].id === "btn_one" ? A(p1, p2) : null;
    event.path[0].id === "btn_two" ? B(p1, p2) : null;
    event.path[0].id === "btn_reset" ? Reset() : null;
}

function A(p1, p2) {
    p1.innerText++;
    console.log(`A score is ${p1.innerText}`);
    headerUpdate(p1, p2);
}
function B(p1, p2) {
    p2.innerText++;
    console.log(`B score is ${p2.innerText}`);
    headerUpdate(p1, p2);
}

function Reset() {
    window.location.reload(true);
}

function Max(event) {
    event.path[0].id === "number" ? MaxValue() : null;
}

function MaxValue() {
    const number = document.getElementById("number");
    let maxScore = number.value;
    maxScore = parseInt(maxScore);
    console.log(`Max score is ${maxScore}`);
}

function headerUpdate(p1, p2) {
    p1.innerText = p1.innerText;
    p2.innerText = p2.innerText;

    const number = document.getElementById("number");
    let maxScore = number.value;
    maxScore = +maxScore;
    const pointOne = +p1.innerText;

    if(pointOne === maxScore) {
        console.log("pointOne wins");
    }
}

Try this code:

// Event Bus Architecture
window.addEventListener('click', Button.bind(this));
window.addEventListener('input', Max.bind(this));

function Button(event) {
    const p1 = document.getElementById("p1");
    const p2 = document.getElementById("p2");
    event.path[0].id === "btn_one" ? A(p1, p2) : null;
    event.path[0].id === "btn_two" ? B(p1, p2) : null;
    event.path[0].id === "btn_reset" ? Reset() : null;
}

function A(p1, p2) {
    p1.innerText++;
    console.log(`A score is ${p1.innerText}`);
    headerUpdate(p1, p2);
}
function B(p1, p2) {
    p2.innerText++;
    console.log(`B score is ${p2.innerText}`);
    headerUpdate(p1, p2);
}

function Reset() {
    window.location.reload(true);
}

function Max(event) {
    event.path[0].id === "number" ? MaxValue() : null;
}

function MaxValue() {
    const number = document.getElementById("number");
    let maxScore = number.value;
    maxScore = parseInt(maxScore);
    console.log(`Max score is ${maxScore}`);
}

function headerUpdate(p1, p2) {
    p1.innerText = p1.innerText;
    p2.innerText = p2.innerText;

    const number = document.getElementById("number");
    let maxScore = number.value;
    maxScore = +maxScore;
    const pointOne = +p1.innerText;

    if(pointOne === maxScore) {
        console.log("pointOne wins");
    }
}

*{
    box-sizing: border-box;
    margin: 2px;
    padding: 0;
    background-color: #7c86ac;
}

.game-box {
    height: 30%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

#tenis{
    width: 30%;
    margin-top: 30px;
}

#btn_one{
    background-color: green;
    border: 3px solid black;
    width: 30%;
}

#btn_two{
    background-color: orangered;
    border: 3px solid black;
    width: 30%;
}

#btn_reset{
    background-color: red;
    border: 3px solid black;
    width: 30%;
}

#number{
    background-color: white;
    border: 3px solid black;
    width: 5%;
}

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Score Keeper</title>
</head>
<body>

    <div class="game-box">
        <img src="./img/tenis_image.jpg" alt="tenis" id="tenis">
        <h2>Score Keeper</h2>
        <h1><span id="p1">0</span> to <span id="p2">0</span> </h1>
        <h3>Use button bellow to count</h3>
        <p id="max">Playing to</p>
        <input type="number" name="number" id="number" value="0">
        <button id="btn_one">+1 Player One</button>
        <button id="btn_two">+1 Player Two</button>
        <button id="btn_reset">Reset</button>

    </div>
    
    <script src="./app.js"></script>
    
</body>
</html>

@TechySharnav I understand your problem. But I think you need to read this: https://stackoverflow.com/a/2613647/10233884 — Edison Pebojot, Apr 04 '21 at 02:23
No, no. I don't have any issue with that. Instead, I am thanking you for pointing that out. But, the answer you posted, shows the above error when run. — TechySharnav, Apr 04 '21 at 05:27

How to compare this two variables?

2 Answers2