Develop Reference

Comparing numbers with JavaScript

How can I loop through an array of numbers and compare them to multiple sets of numbers. I am trying to program the game logic for a Tic Tac Toe project. When the players click a square the number of the square that was clicked is stored in p1Taken or p2Taken. I am trying to loop through those arrays and compare the numbers to the numbers for the squares needed to win. Only the first if statement works and I don’t think it’s bc of the number of squares but because there is 3 numbers in the array. Here is the code that I have so far:
const turnTaken = {
X: [],
O: []
}
var whosTurn = 'X';
let p1Taken = turnTaken.X;
let p2Taken = turnTaken.O;
const gameGrid = document.getElementsByClassName("grid");
const message = document.getElementById("message");
for(i=0, l=gameGrid.length; i < l; i++){
const boardNum = gameGrid[i].getAttribute("value");
gameGrid[i].addEventListener('click', function(e) {
if(whosTurn == 'X') {
message.innerHTML = "O's Turn";
player1Turn(e);
} else {
message.innerHTML = "X's Turn";
player2Turn(e);
}
});
}
function player1Turn(e){
const clickedValue = e.target.getAttribute("value");
const clicked = e.target;
const xIcon = document.createElement("IMG");
const srcX = "img/x-icon.png";
xIcon.setAttribute("src", srcX);
clicked.appendChild(xIcon);
p1Taken.push(clickedValue);
whosTurn = 'O';
player1CheckWin(p1Taken);
}
function player2Turn(e){
const clickedValue = e.target.getAttribute("value");
const clicked = e.target;
const oIcon = document.createElement("IMG");
const srcO = "img/o-icon.png";
oIcon.setAttribute("src", srcO);
clicked.appendChild(oIcon);
p2Taken.push(clickedValue);
whosTurn = 'X';
player2CheckWin(p2Taken);
}
function player1CheckWin(p1Taken){
for(var i=0; i < p1Taken.length; i++) {
if(p1Taken.length > 2) {
if(p1Taken[i] == 1 || p1Taken[i] == 2 || p1Taken[i] == 3) {
console.log("first");
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 4 || p1Taken[i] == 5 || p1Taken[i] == 6) {
console.log("second");
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 7 || p1Taken[i] == 8 || p1Taken[i] == 9) {
console.log("third");
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 1 || p1Taken[i] == 4 || p1Taken[i] == 7) {
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 2 || p1Taken[i] == 5 || p1Taken[i] == 8) {
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 3 || p1Taken[i] == 6 || p1Taken[i] == 9) {
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 1 || p1Taken[i] == 5 || p1Taken[i] == 9){
message.innerHTML = "X Won!";
} else if(p1Taken[i] == 3 || p1Taken[i] == 5 || p1Taken[i] == 7) {
message.innerHTML = "X Won!";
} else {
break;
}
} else {
break;
}
}
}
function player2CheckWin(p2Taken){
for(var j=0; j < p2Taken.length; j++) {
if(p2Taken.length > 2) {
if(p2Taken[j] == 1 || p2Taken[j] == 2 || p2Taken[j] == 3) {
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 4 || p2Taken[j] == 5 || p2Taken[j] == 6) {
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 7 || p2Taken[j] == 8 || p2Taken[j] == 9) {
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 1 || p2Taken[j] == 4 || p2Taken[j] == 7) {
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 2 || p2Taken[j] == 5 || p2Taken[j] == 8) {
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 3 || p2Taken[j] == 6 || p2Taken[j] == 9) {
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 1 || p2Taken[j] == 5 || p2Taken[j] == 9){
message.innerHTML = "O Won!";
} else if(p2Taken[j] == 3 || p2Taken[j] == 5 || p2Taken[j] == 7) {
message.innerHTML = "O Won!";
} else {
break;
}
} else {
break;
}
}
}

I'll just pick one of your predicates:
p1Taken[i] == 1 && 2 && 3
This is true iff all of the following are true:
p1Taken[i] is similar to 1 (after necessary casting)
2 is true (after necessary casting)
3 is true (after necessary casting)
So I know that the numbers 2 and 3 are truthy and thus casting to boolean will both be true. If you meant to compare p1Taken[i] to the 3 numbers you need to do 3 comparisons:
p1Taken[i] == 1 || p1Taken[i] == 2 || p1Taken[i] == 3
If the number always are integers you can use ranges:
p1Taken[i] >= 1 && p1Taken[i] <= 3
EDIT
The key to making something easy rather than hard is to have a though out data structure that supports the operations you want to do. I would imagine that a board with the indexes representing the positions would be just as easy to update and it will be easy to check if one won. Here is how I would have modelled it:
function getWinner(b) {
if (b[4] && (
b[3] == b[4] && b[4] == b[5] ||
b[0] == b[4] && b[4] == b[8] ||
b[2] == b[4] && b[4] == b[6] ||
b[1] == b[4] && b[4] == b[7])) {
return b[4];
}
if (b[0] && (
b[1] == b[0] && b[0] == b[2] ||
b[3] == b[0] && b[0] == b[6])) {
return b[0];
}
if (b[8] && (
b[6] == b[8] && b[8] == b[7] ||
b[2] == b[8] && b[8] == b[5])) {
return b[8];
}
return false;
}
// tests
const o = 'o';
const x = 'x';
const n = undefined;
const test1 = [
o, o, x,
x, o, x,
o, n, x
];
const test2 = [
o, x, x,
x, o, o,
o, n, x
];
const test3 = [
o, x, x,
o, o, o,
x, n, x
];
console.log(getWinner(test1)); // prints x
console.log(getWinner(test2)); // prints false
console.log(getWinner(test3)); // prints o

you need to correct your logic of comparison
change this
p1Taken[i] == 1 && 2 && 3
to
p1Taken[i] == 1 && p1Taken[i] == 2 && p1Taken[i] == 3
similarly for others
&& operator expects expressions to be compared, in your case you gave first expression as p1Taken[i] == 1 which is correct but second & third expression given were '2' & '3' which are truthy values
Now about your logic part, the above code still wont give correct result as you expecting same thing p1Taken[i] to be equal to multiple values at same time.
so just a hint, p1Taken keep it as array of taken tile nos & use condition as
p1Taken.includes(1) && p1Taken.includes(2) && p1Taken.includes(3)
TicTacToe game

Need solution for if statement logic

I need help on a condition logic using if statement as following:
Variables A and B contain 3 properties which is level1, level2 and level3.
level1 and level2 can be 0 or more and level3 is null or numeric.
Variables A and B can be null.
Currently I have this condition:
if (A.level1 == 0 and B.level1 == 0) {
code here
} else if (A.level2 == 0 and B.level2 == 0) {
code here
} else if (A.level3 != null and B.level3 != null) {
code here
}
The problem is that this code doesn't handle the Variables A and B can be null part. The code should handle that part like this:
When A is null, B will still go through the same condition but without A and vice versa.
However, if A and B is null then the condition will be false at once.
I have problem in how to implement the Variables A and B can be null part in my condition, any advice?

Add the A and B isNull check in your condition:
if (A == null && B == null) {
return;
} else if ((A == null || A.level1 == 0) && (B == null || B.level1 == 0)) {
// code here
} else if ((A == null || A.level2 == 0) && (B == null || B.level2 == 0)) {
// code here
} else if ((A == null || A.level3 != null) && (B == null || B.level3 != null)) {
// code here
}
Explanation,
Take A for example in this else if ((A == null || A.level1 == 0) && (B == null || B.level1 == 0)) statement:
By putting the A == null || in (A == null || A.level1 == 0) && (B == null || B.level1 == 0), if A is null, then this A.level1 == 0 check will be ignored, thus the check will be equivalent with else if (B == null || B.level1 == 0).
Since the first if already check A == null && B == null, the else if below won't have A and B both null. Therefore now else if ((A == null || A.level1 == 0) && (B == null || B.level1 == 0)) will be equivalent to else if (B.level1 == 0).
p.s. Here we are taking advantage of the || characteristic, that is if the first condition is fulfilled, the second condition will be ignored.

Seems like this is what you're looking for:
// Both A and B are null
if(A == null && B == null){
// do something
}
// Only A is null
else if(A == null){
if(B.level1 == 0){
// do something
}
else if(B.level2 == 0){
// do something
}
else if(B.level3 != null){
// do something
}
}
// Only B is null
else if(B == null){
if(A.level1 == 0){
// do something
}
else if(A.level2 == 0){
// do something
}
else if(A.level3 != null){
// do something
}
}
// Neither A or B are null
else{
if(A.level1 == 0 && B.level1 == 0){
// do something
}
else if(A.level2 == 0 && B.level1 == 0){
// do something
}
else if(A.level3 != null && B.level3 != null){
// do something
}
}

I suggest to check for falsy values of A or B first and then check the properties.
var A = null,
B = null;
if (!A && !B) {
console.log('A or B is null');
} else if (A.level1 === 0 && B.level1 === 0) {
console.log(1);
} else if (A.level2 === 0 && B.level2 === 0) {
console.log(2);
} else if (A.level3 != null && B.level3 != null) {
console.log(3);
}

Handle A and B separately,
if(!A){
if(A.level1 === 0 && A.level2 ===0){
}
else if(A.level1 === 0){
}
else if(A.level1 > 0){
}
if(A.level2 === 0){
}
else if(A.level2 > 0){
}
if(A.level3 === null){
}
else if (typeof (A.level3) === "number"){
}
}
same for B here...

Why is the 'o' is true? Javascript(Angular)

Help me please, I'm trying to make a rule for the little game and there is the problem.
I'm creating winning combination and say if the cell && cell+1 && cell+2 == to 'X' then you win, but when between two "X"s presents "o" it also says that "X" wins. Why? Please see my code and the game example on link a the bottom.
this.rezult = function(){
this.arr2.forEach(function(arr, i, innerArr){
arr.forEach(function(val, j){
var wincomb = innerArr[i][j] && innerArr[i][j+1] && innerArr[i][j+2];
var wincomb2 = innerArr[i][j] && innerArr[i+1][j] && innerArr[i+2][j];
var wincomb3 = innerArr[i][j] && innerArr[i+1][j+1] && innerArr[i+2][j+2];
console.log(wincomb == "X" && innerArr[i][j] !== "o");
// console.log(innerArr);
// THE RULE
if(wincomb == "X"){
alert(' X wins!');
}
});
});
};
Link to JSFiddle

In JavaScript, the && operator has interesting behavior with non-boolean values.
If the left-side of && is "truthy", the result is the right-side.
If the left-side of && is "falsey", the result is the left-side.
All non-empty strings are "truthy".
So, consider these examples:
("A" && "B" && "C") === "C"
("" && "B" && "C") === ""
(0 && "B" && "C") === 0
("X" && "X" && "O") === "O"
("O" && "O" && "X") === "X"
By the looks of it, you're trying to check if all 3 values are equal. You shouldn't use && for that, you should use === for that.
At the risk of doing your homework for you ;) here's a good way to do this:
function areTheSame(a,b,c) {
return a === b && b === c;
}
var down = areTheSame(innerArr[i][j], innerArr[i][j+1], innerArr[i][j+2]);
var across = areTheSame(innerArr[i][j], innerArr[i+1][j], innerArr[i+2][j]);
var diagonal = areTheSame(innerArr[i][j], innerArr[i+1][j+1], innerArr[i+2][j+2]);
if (down || across || diagonal) {
var winner = innerArr[i][j];
alert( winner + " wins!");
}

X's Replaces O's

i'm making the tic tac toe game and im trying to fix a bug that i have now.
When i play the game and i click on the O's it changes to X how can i fix this?
I thought it would be something like: If (turn == 0 && ('td') == "") {
But that doesn't work
var newGame = function () {
$('td').one('click', function (event) {
if (turn == 0) {
$(this).text(human);
boardCheck();
checkWin();
turn == 1;
compMove();
boardCheck();
checkWin();
}
});
};
// VARIABLES
var human = 'x'; // turn = 0
var computer = 'o'; // turn = 1
var compMove;
var turn = 0; // toggles btw 0 and 1 for switching turns
var boardCheck; // function to check value in each cell
var a1; // value within each cell
var a2;
var a3;
var b1;
var b2;
var b3;
var c1;
var c2;
var c3;
var checkWin; // function that checks the board for winning combo
var xWin = false; // true if X wins
var oWin = false; // true if O wins
var winAlert; // function that declares winner and restarts game
var newGame;
var clearBoard;
// PLACES AN X OR O IN THE BOX WHEN CLICKED. TOGGLES.
var newGame = function () {
$('td').one('click', function (event) {
if (turn == 0) {
$(this).text(human);
boardCheck();
checkWin();
turn == 1;
compMove();
boardCheck();
checkWin();
}
});
};
// INITIALIZES GAME - keep after var newGame
$(document).ready(function () {
newGame();
});
// COMP MOVE AI DETECTS IF THERE ARE TWO IN A ROW NEXT TO AN EMPTY CELL AND PLACES MOVE THERE
var compMove = function () {
if (a1 == "" && ((a3 == "x" && a2 == "x") || (c3 == "x" && b2 == "x") || (c1 == "x" && b1 == "x"))) {
$('#a1').text("o");
turn = 0;
} else {
if (a2 == "" && ((a1 == "x" && a3 == "x") || (c2 == "x" && b2 == "x"))) {
$('#a2').text("o");
turn = 0;
}
else{
if (a3 == "" && ((a1 == "x" && a2 == "x") || (c1 == "x" && b2 == "x") || (c3 == "x" && b3 == "x"))) {
$('#a3').text("o");
turn = 0;
}
else{
if (c3 == "" && ((c1 == "x" && c2 == "x") || (a1 == "x" && b2 == "x") || (a3 == "x" && b3 == "x"))) {
$('#c3').text("o");
turn = 0;
}
else{
if (c1 == "" && ((c3 == "x" && c2 == "x") || (a3 == "x" && b2 == "x") || (a1 == "x" && b1 == "x"))) {
$('#c1').text("o");
turn = 0;
}
else{
if (c2 == "" && ((c3 == "x" && c1 == "x") || (a2 == "x" && b2 == "x"))) {
$('#c2').text("o");
turn = 0;
}
else{
if (b1 == "" && ((b3 == "x" && b2 == "x") || (a1 == "x" && c1 == "x"))) {
$('#b1').text("o");
turn = 0;
}
else{
if (b3 == "" && ((a3 == "x" && c3 == "x") || (b2 == "x" && b1 == "x"))) {
$('#b3').text("o");
turn = 0;
}
else{
if (b2 == "" && ((a3 == "x" && c1 == "x") || (c3 == "x" && a1 == "x") || (b3 == "x" && b1 == "x") || (c2 == "x" && a2 == "x"))) {
$('#b2').text("o");
turn = 0;
}
else{ // IF NO OPP TO BLOCK A WIN, THEN PLAY IN ONE OF THESE SQUARES
if (b2 == "") {
$('#b2').text("o");
turn = 0;
}
else{
if (a1 == "") {
$('#a1').text("o");
turn = 0;
}
else{
if (c3 == "") {
$('#c3').text("o");
turn = 0;
}
else {
if (c2 == "") {
$('#c2').text("o");
turn = 0;
}
else{
if (b1 == "") {
$('#b1').text("o");
turn = 0;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
};
// CREATES A FUNCTION TO DETECT WHAT IS IN EACH BOX AFTER EACH MOVE
boardCheck = function () {
a1 = $('#a1').html();
a2 = $('#a2').html();
a3 = $('#a3').html();
b1 = $('#b1').html();
b2 = $('#b2').html();
b3 = $('#b3').html();
c1 = $('#c1').html();
c2 = $('#c2').html();
c3 = $('#c3').html();
};
// CREATES A FUNCTION TO DETECT A WIN OR A TIE
checkWin = function () { // CHECKS IF X WON
if ((a1 == a2 && a1 == a3 && (a1 == "x")) || //first row
(b1 == b2 && b1 == b3 && (b1 == "x")) || //second row
(c1 == c2 && c1 == c3 && (c1 == "x")) || //third row
(a1 == b1 && a1 == c1 && (a1 == "x")) || //first column
(a2 == b2 && a2 == c2 && (a2 == "x")) || //second column
(a3 == b3 && a3 == c3 && (a3 == "x")) || //third column
(a1 == b2 && a1 == c3 && (a1 == "x")) || //diagonal 1
(a3 == b2 && a3 == c1 && (a3 == "x")) //diagonal 2
) {
xWin = true;
winAlert();
} else { // CHECKS IF O WON
if ((a1 == a2 && a1 == a3 && (a1 == "o")) || //first row
(b1 == b2 && b1 == b3 && (b1 == "o")) || //second row
(c1 == c2 && c1 == c3 && (c1 == "o")) || //third row
(a1 == b1 && a1 == c1 && (a1 == "o")) || //first column
(a2 == b2 && a2 == c2 && (a2 == "o")) || //second column
(a3 == b3 && a3 == c3 && (a3 == "o")) || //third column
(a1 == b2 && a1 == c3 && (a1 == "o")) || //diagonal 1
(a3 == b2 && a3 == c1 && (a3 == "o")) //diagonal 2
) {
oWin = true;
winAlert();
} else { // CHECKS FOR TIE GAME IF ALL CELLS ARE FILLED
if (((a1 == "x") || (a1 == "o")) && ((b1 == "x") || (b1 == "o")) && ((c1 == "x") || (c1 == "o")) && ((a2 == "x") || (a2 == "o")) && ((b2 == "x") || (b2 == "o")) && ((c2 == "x") || (c2 == "o")) && ((a3 == "x") || (a3 == "o")) && ((b3 == "x") || (b3 == "o")) && ((c3 == "x") || (c3 == "o"))) {
alert("It's a tie!");
clearBoard();
}
}
}
};
// DECLARES WHO WON
var winAlert = function () {
if (xWin == true) {
alert("You won!");
clearBoard(); // THIS DOESN'T WORK
} else {
if (oWin == true) {
alert("Sorry, you lose!");
clearBoard(); // THIS DOESN'T WORK
}
}
};
// NEWGAME BUTTON CLEARS THE BOARD, RESTARTS GAME, AND RESETS THE WINS
var clearBoard = $('#restart').click(function (event) {
a1 = $('#a1').text("");
b1 = $('#b1').text("");
c1 = $('#c1').text("");
a2 = $('#a2').text("");
b2 = $('#b2').text("");
c2 = $('#c2').text("");
a3 = $('#a3').text("");
b3 = $('#b3').text("");
c3 = $('#c3').text("");
xWin = false;
oWin = false;
newGame();
window.location.reload(true); // WITHOUT THIS, THERE'S A BUG WHICH PLACES MULTIPLE 0'S ON ALL GAMES AFTER THE FIRST
});
// STILL NEED TO FIX:
// * Alert for tie game or xWin appears twice
// * X's can replace O's
// * Missed opportunities for O to win
// * Almost never let's human win
// * Clean up logic for compMove'

if (turn == 0 && $(this).text() == "") {

Validate CreditCard Number and checked radio button javascript

I have radio buttons radioVisa, and radioMaster. If either one is checked, I need to first check to see which one is selected and then validate that the card number entered is valid. I also need to make sure that only numbers are entered.... I am not allowed to use any regular expression techniques.... If the radioVisa is checked, it seems to work but when I added the code for the radioMaster, if it is checked it does't work.... Can someone tell me what I am doing wrong please....
function isValidCardNumber(num, isVisa, isMaster){
var card = new Array();
if (document.getElementById('radioVisa').checked){
card = isVisa;
}
if (num[0] != '4' || num.length != 16 ){
return false;
} else {
return true;
} else if (document.getElementById('radioMaster').checked){
card = isMaster;
}
if (num[0] != '51' || num[0] != '52' || num[0] != '53' ||
num[0] != '54' || num[0] != '55' || num.length != 16 ){
return false;
} else {
return true;
}

if (num[0] != '51' || num[0] != '52' || num[0] != '53' ||
num[0] != '54' || num[0] != '55' || num.length != 16 )
You can not combine all those numbers.You need to specify individually.
or
var numbers= ["51", "52", "53", "54",55];
var index = numbers.indexOf(num[0]);
It will return -1 if that is not exist otherwise return the index