CODEWITHSUNDEEP
javascripthtmlcss
Sajjad Tabreez
Sajjad Tabreez

Reputation: 188

Comparing function result and displaying the true condition

I have created a simple tic tac toe game in Javascript. The problem I'm facing when displaying the results is that it's running both the win scenario and lose scenario and displaying two alerts 'you win', 'you lose' whereas only one should be displayed as per the conditions.

Can anyone provide some insights on how to resolve this issue?

My code:

const myArray = [];

function onSubmit() {
  var input = document.getElementsByName("array");
  for (var i = 0; i < input.length; i++) {
    var a = input[i];
    var k = a.value;
    myArray.push(k);
    console.log(myArray);
  }
  straightRowsHorizontalX() || straightRowsVerticalX();
}

function straightRowsHorizontalX() {
  if (myArray[0] === "x" && myArray[1] === "x" && myArray[2] === "x") {
    alert("you win");
  } else if (myArray[3] === "x" && myArray[4] === "x" && myArray[5] === "x") {
    alert("you win");
  } else if (myArray[6] === "x" && myArray[7] === "x" && myArray[8] === "x") {
    alert("you win");
  } else if (myArray[0] === "x" && myArray[3] === "x" && myArray[6] === "x") {
    alert("you win");
  } else if (myArray[1] === "x" && myArray[4] === "x" && myArray[7] === "x") {
    alert("you win");
  } else if (myArray[2] === "x" && myArray[5] === "x" && myArray[8] === "x") {
    alert("you win");
  } else if (myArray[0] === "x" && myArray[4] === "x" && myArray[8] === "x") {
    alert("you win");
  } else if (myArray[2] === "x" && myArray[4] === "x" && myArray[6] === "x") {
    alert("you win");
  } else {
    alert("you lose");
  }
}

function straightRowsVerticalX() {
  if (myArray[0] === "o" && myArray[1] === "o" && myArray[2] === "o") {
    alert("you win");
  } else if (myArray[3] === "o" && myArray[4] === "o" && myArray[5] === "o") {
    alert("you win");
  } else if (myArray[6] === "o" && myArray[7] === "o" && myArray[8] === "o") {
    alert("you win");
  } else if (myArray[0] === "o" && myArray[3] === "o" && myArray[6] === "o") {
    alert("you win");
  } else if (myArray[1] === "o" && myArray[4] === "o" && myArray[7] === "o") {
    alert("you win");
  } else if (myArray[2] === "o" && myArray[5] === "o" && myArray[8] === "o") {
    alert("you win");
  } else if (myArray[0] === "o" && myArray[4] === "o" && myArray[8] === "o") {
    alert("you win");
  } else if (myArray[2] === "o" && myArray[4] === "o" && myArray[6] === "o") {
    alert("you win");
  } else {
    alert("you lose");
  }
}
.tic-tac-square {
  width: 50px;
  height: 50px;
  font-size: 16px;
  margin-right: 10px;
  text-align: center;
}

.row {
  margin-bottom: 10px;
}

.check-result-button {
  margin-top: 20px;
  padding: 10px;
}
<!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="styles.css" />
  <title>Tic Tac Toe</title>
</head>

<body>
  <h3>Play Tic Tac Toe</h3>
  <form class="" action="index.html" method="post">
    <div class="row">
      <input id="one" name="array" class="tic-tac-square" />
      <input id="two" name="array" class="tic-tac-square" />
      <input id="three" name="array" class="tic-tac-square" />
    </div>

    <div class="row">
      <input id="four" name="array" class="tic-tac-square" />
      <input id="five" name="array" class="tic-tac-square" />
      <input id="six" name="array" class="tic-tac-square" />
    </div>

    <div>
      <input id="seven" name="array" class="tic-tac-square" />
      <input id="eight" name="array" class="tic-tac-square" />
      <input id="nine" name="array" class="tic-tac-square" />
    </div>

    <button type="button" name="button" class="check-result-button" onclick="onSubmit()">
            Click to check the results
          </button>
  </form>

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

</html>

Upvotes: 1

Views: 34

Answers (1)

dave
dave

Reputation: 64657

Right now you run both straightRowsHorizontalX the straightRowsVerticalX functions every time (since they don't return anything). Basically you should just change every alert("you win") to return true, and every alert("you lose") to return false, and then do:

if (straightRowsHorizontalX() || straightRowsVerticalX()) {
    alert("you win");
} else {
    alert("you lose");
}

Upvotes: 1

Related Questions