Home > OS >  tic tac toe tile logic in javascript
tic tac toe tile logic in javascript

Time：12-29

Someone, please help me with this, there is no error but when I click on any tile, it is always 'X' that is shown inside the tile but as we all know the there should be toggling between 'X' and 'O' and I have written the logic for that but I don't know why always 'X' is showing, please help

Also, I have not written the logic for win/lose in javascript, I will write it later.

let previousClick = 'O';

let Button1 = document.getElementById('b1');
let Button2 = document.getElementById('b2');
let Button3 = document.getElementById('b3');
let Button4 = document.getElementById('b4');
let Button5 = document.getElementById('b5');
let Button6 = document.getElementById('b6');
let Button7 = document.getElementById('b7');
let Button8 = document.getElementById('b8');
let Button9 = document.getElementById('b9');


function handleClick1() {

    if (Button1.innerText == '') {
        if (previousClick === 'X') {
            Button1.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick === 'O') {
            Button1.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick2() {

    if (Button2.innerText == '') {
        if (previousClick === 'X') {
            Button2.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick === 'O') {
            Button2.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick3() {

    if (Button3.innerText === '') {
        if (previousClick === 'X') {
            Button3.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick === 'O') {
            Button3.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick4() {

    if (Button4.innerText == '') {
        if (previousClick == 'X') {
            Button4.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick == 'O') {
            Button4.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick5() {

    if (Button5.innerText == '') {
        if (previousClick == 'X') {
            Button5.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick == 'O') {
            Button5.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick6() {

    if (Button6.innerText == '') {
        if (previousClick == 'X') {
            Button6.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick == 'O') {
            Button6.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick7() {

    if (Button7.innerText == '') {
        if (previousClick == 'X') {
            Button7.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick == 'O') {
            Button7.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick8() {

    if (Button8.innerText == '') {
        if (previousClick == 'X') {
            Button8.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick == 'O') {
            Button8.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick9() {

    if (Button9.innerText == '') {
        if (previousClick == 'X') {
            Button9.innerText = 'O';
            previousClick = 'O';
        }
        if (previousClick == 'O') {
            Button9.innerText = 'X';
            previousClick = 'X';
        }
    }
}
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 300px;
  max-height: 300px;
  margin: auto;
  margin-top: 20vh;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 300px;
  height: 100px;
  margin: auto;
}
button {
  border: 1px solid black;
  font-weight: 900;
  font-size: 50px;
  background-color: red;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Tic Tac Toe</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div >
      <div >
        <button id="b1" onclick="handleClick1()"></button>
        <button id="b2" onclick="handleClick2()"></button>
        <button id="b3" onclick="handleClick3()"></button>
      </div>
      <div >
        <button id="b4" onclick="handleClick4()"></button>
        <button id="b5" onclick="handleClick5()"></button>
        <button id="b6" onclick="handleClick6()"></button>
      </div>
      <div >
        <button id="b7" onclick="handleClick7()"></button>
        <button id="b8" onclick="handleClick8()"></button>
        <button id="b9" onclick="handleClick9()"></button>
      </div>
    </div>
    <script src="./logic.js"></script>
  </body>
</html>

CodePudding user response：

let previousClick = 'O';

let Button1 = document.getElementById('b1');
let Button2 = document.getElementById('b2');
let Button3 = document.getElementById('b3');
let Button4 = document.getElementById('b4');
let Button5 = document.getElementById('b5');
let Button6 = document.getElementById('b6');
let Button7 = document.getElementById('b7');
let Button8 = document.getElementById('b8');
let Button9 = document.getElementById('b9');


function handleClick1() {

    if (Button1.innerText == '') {
        if (previousClick === 'X') {
            Button1.innerText = 'O';
            previousClick = 'O';
        }
       else{
            Button1.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick2() {

    if (Button2.innerText == '') {
        if (previousClick === 'X') {
            Button2.innerText = 'O';
            previousClick = 'O';
         }
       else{
            Button2.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick3() {

    if (Button3.innerText === '') {
        if (previousClick === 'X') {
            Button3.innerText = 'O';
            previousClick = 'O';
        }
       else{
            Button3.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick4() {

    if (Button4.innerText == '') {
        if (previousClick == 'X') {
            Button4.innerText = 'O';
            previousClick = 'O';
      }
       else{
            Button4.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick5() {

    if (Button5.innerText == '') {
        if (previousClick == 'X') {
            Button5.innerText = 'O';
            previousClick = 'O';
        }
       else{
            Button5.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick6() {

    if (Button6.innerText == '') {
        if (previousClick == 'X') {
            Button6.innerText = 'O';
            previousClick = 'O';
         }
       else{
            Button6.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick7() {

    if (Button7.innerText == '') {
        if (previousClick == 'X') {
            Button7.innerText = 'O';
            previousClick = 'O';
       }
       else{
            Button7.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick8() {

    if (Button8.innerText == '') {
        if (previousClick == 'X') {
            Button8.innerText = 'O';
            previousClick = 'O';
            }
       else{
            Button8.innerText = 'X';
            previousClick = 'X';
        }
    }
}
function handleClick9() {

    if (Button9.innerText == '') {
        if (previousClick == 'X') {
            Button9.innerText = 'O';
            previousClick = 'O';
        }
       else{
            Button9.innerText = 'X';
            previousClick = 'X';
        }
    }
}
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  max-width: 300px;
  max-height: 300px;
  margin: auto;
  margin-top: 20vh;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 300px;
  height: 100px;
  margin: auto;
}
button {
  border: 1px solid black;
  font-weight: 900;
  font-size: 50px;
  background-color: red;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Tic Tac Toe</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div >
      <div >
        <button id="b1" onclick="handleClick1()"></button>
        <button id="b2" onclick="handleClick2()"></button>
        <button id="b3" onclick="handleClick3()"></button>
      </div>
      <div >
        <button id="b4" onclick="handleClick4()"></button>
        <button id="b5" onclick="handleClick5()"></button>
        <button id="b6" onclick="handleClick6()"></button>
      </div>
      <div >
        <button id="b7" onclick="handleClick7()"></button>
        <button id="b8" onclick="handleClick8()"></button>
        <button id="b9" onclick="handleClick9()"></button>
      </div>
    </div>
    <script src="./logic.js"></script>
  </body>
</html>

CodePudding user response：

As Peter B said, you have to use else if in the code.

I created a single handler instead of 9, so decided that my solution worth posting anyway. Good luck!

let previousClick = "O";
const container = document.getElementsByClassName("container")[0];

container.addEventListener('click', (e) => {
  const target = e.target 
  if (target.tagName !== 'BUTTON' || target.innerText !== '') {
    return
  }
  
  e.stopPropagation();
  if (previousClick === "X") {
    target.innerText = "O";
    previousClick = "O";
  } else if (previousClick === "O") {
    target.innerText = "X";
    previousClick = "X";
  }
});
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      max-width: 300px;
      max-height: 300px;
      margin: auto;
      margin-top: 20vh;
    }

    .row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 300px;
      height: 100px;
      margin: auto;
    }
    button {
      border: 1px solid black;
      font-weight: 900;
      font-size: 50px;
      background-color: red;
      width: 100px;
      height: 100px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Tic Tac Toe</title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="./style.css" />
      </head>
      <body>
        <div >
          <div >
            <button id="b1"></button>
            <button id="b2"></button>
            <button id="b3"></button>
          </div>
          <div >
            <button id="b4"></button>
            <button id="b5"></button>
            <button id="b6"></button>
          </div>
          <div >
            <button id="b7"></button>
            <button id="b8"></button>
            <button id="b9"></button>
          </div>
        </div>
        <script src="./logic.js"></script>
      </body>
    </html>

CodePudding user response：

First suggestion: Use a single function for the 9 handle clicks: You can make a single click function:

<button onclick='click( id )' id='b   id'></button>
.
.
.
<!-- replace the id with a number for every button -->
<script>
    // js
    function click(id) {
        // click function 
        let btn = document.getElementById('b' id);
        if (btn.innerHTML == '') {
            // select X or O
            // ternary operator
            btn.innerHTML = (previous=='X') ? 'O' : 'X'
            previous = btn.innerHTML
        }
    }
</script>

Basically what is happening here is that every button will pass its id to the function, to make it select the button itself.
Then if the button is empty
Select the opposite of the previous.
Then change the previous to the text on the btn.

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Page link：https//www.codepudding.com/os/244124.html

Prev:Check for multiple array indexes in react/typescript, whether one exists?
Next:Simplest way to check if the current url contains a subdomain
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding