Why is this javascript class not running or why are the buttons in the class not working?-CodePudding

I would like to instantiate buttons when running the class.

class MainGame {
  constructor() {
    //BUTTONS
    button1Player = document.getElementById("1player");
    button2Players = document.getElementById("2players");
    testing = document.getElementById("test");

    //set default value to false for players
    onePlayer = false;
    twoPlayers = false;

    button1Player.addEventListener("click", function () {
      alert("You have chosen single-player");
      onePlayer = true;
    });

    button2Players.addEventListener("click", function () {
      alert("You have chosen multiplayer");
      twoPlayers = true;
    });

    testing.addEventListener("click", function () {
      alert(onePlayer);
    });
  }
  }
  
  game = new MainGame();

<!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>Project - Tobias game</title>
  </head>
  <body>
    <header>
      <h1>Square game</h1>
    </header>
    <main>
      <h2>Page Title</h2>

      <button id="1player">One Player</button>
      <button id="2players">Two Players</button>
      <button id="test">test</button>
    </main>
    <footer>
      <p>&copy;</p>
    </footer>
  </body>
</html>

When I press the button no alerts appears. My procedural code is working. I am now trying to translate it to OOP. Why are the buttons not working as intended?

CodePudding user response：

When you want to use the class you need to instantiate it with new. You are also creating a lot of global variables.

Below is the code cleaned up a bit. I kept it working the way you had it.

class MainGame {

  onePlayer = false;
  twoPlayers = false;

  constructor() {
    this.addButtonEvents();
  }
  
  addButtonEvents () {
    //BUTTONS
    const button1Player = document.getElementById("1player");
    const button2Players = document.getElementById("2players");
    const testing = document.getElementById("test");

    button1Player.addEventListener("click", () => {
      alert("You have chosen single-player");
      this.onePlayer = true;
      this.twoPlayers = false;
    });

    button2Players.addEventListener("click", () => {
      alert("You have chosen multiplayer");
      this.onePlayer = false;
      this.twoPlayers = true;
    });

    testing.addEventListener("click", () => {
      alert(this.onePlayer);
    });
  }
}

new MainGame();

<!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>Project - Tobias game</title>
</head>

<body>
  <header>
    <h1>Square game</h1>
  </header>
  <main>
    <h2>Page Title</h2>

    <button id="1player">One Player</button>
    <button id="2players">Two Players</button>
    <button id="test">test</button>
  </main>
  <footer>
    <p>&copy;</p>
  </footer>
</body>

</html>

CodePudding user response：

you need to create the instant of the class like game = new MainGame()