Develop Reference

Tic Tac Toe: X go first

I took this code from the internet and want to modify it so that regardless of which symbol I select, the x starts first (the computer in this case).
If I select to play with X, I will start first and the computer will play with O.
If I select to play with O, the computer will receive X and make the first move.
const selectBox = document.querySelector(".select-box"),
selectBtnX = selectBox.querySelector(".options .playerX"),
selectBtnO = selectBox.querySelector(".options .playerO"),
playBoard = document.querySelector(".play-board"),
players = document.querySelector(".players"),
allBox = document.querySelectorAll("section span"),
resultBox = document.querySelector(".result-box"),
wonText = resultBox.querySelector(".won-text"),
replayBtn = resultBox.querySelector("button");
let x = 'x';
let O = 'O';
window.onload = () => {
for (let i = 0; i < allBox.length; i++) {
allBox[i].setAttribute("onclick", "clickedBox(this)");
}
}
selectBtnX.onclick = () => {
selectBox.classList.add("hide");
playBoard.classList.add("show");
}
selectBtnO.onclick = () => {
selectBox.classList.add("hide");
playBoard.classList.add("show");
players.setAttribute("class", "players active player");
}
let playerXIcon = "fas fa-times",
playerOIcon = "far fa-circle",
playerSign = "X",
runBot = true;
function clickedBox(element) {
if (players.classList.contains("player")) {
playerSign = "O";
element.innerHTML = `<i class="${playerOIcon}"></i>`;
players.classList.remove("active");
element.setAttribute("id", playerSign);
} else {
element.innerHTML = `<i class="${playerXIcon}"></i>`;
element.setAttribute("id", playerSign);
players.classList.add("active");
}
selectWinner();
element.style.pointerEvents = "none";
playBoard.style.pointerEvents = "none";
let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed();
setTimeout(() => {
bot(runBot);
}, randomTimeDelay);
}
function bot() {
let array = [];
if (runBot) {
playerSign = "O";
for (let i = 0; i < allBox.length; i++) {
if (allBox[i].childElementCount == 0) {
array.push(i);
}
}
let randomBox = array[Math.floor(Math.random() * array.length)];
if (array.length > 0) {
if (players.classList.contains("player")) {
playerSign = "X";
allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`;
allBox[randomBox].setAttribute("id", playerSign);
players.classList.add("active");
} else {
allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`;
players.classList.remove("active");
allBox[randomBox].setAttribute("id", playerSign);
}
selectWinner();
}
allBox[randomBox].style.pointerEvents = "none";
playBoard.style.pointerEvents = "auto";
playerSign = "X";
}
}
function getIdVal(classname) {
return document.querySelector(".box" + classname).id;
}
function checkIdSign(val1, val2, val3, sign) {
if (getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign) {
return true;
}
}
function selectWinner() {
if (checkIdSign(1, 2, 3, playerSign) || checkIdSign(4, 5, 6, playerSign) || checkIdSign(7, 8, 9, playerSign) || checkIdSign(1, 4, 7, playerSign) || checkIdSign(2, 5, 8, playerSign) || checkIdSign(3, 6, 9, playerSign) || checkIdSign(1, 5, 9, playerSign) || checkIdSign(3, 5, 7, playerSign)) {
runBot = false;
bot(runBot);
setTimeout(() => {
resultBox.classList.add("show");
playBoard.classList.remove("show");
}, 700);
wonText.innerHTML = `<p>${playerSign}</p> wins!`;
} else {
if (getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != "") {
runBot = false;
bot(runBot);
setTimeout(() => {
resultBox.classList.add("show");
playBoard.classList.remove("show");
}, 700);
wonText.textContent = "It's a draw!";
}
}
}
replayBtn.onclick = () => {
window.location.reload();
}

I think when you select to play with 0, you should call bot to make a first move.
You can refer
selectBtnO.onclick = () => {
selectBox.classList.add("hide");
playBoard.classList.add("show");
players.setAttribute("class", "players active player");
bot(true); // call bot when you selet to play with O
}

Solving TicTacToe with minimax algorithm in Javascript

let _board = [[null, null, null], [null, null, null], [null, null, null]];
let _flag = true;
let _AIrowIndex = null;
let _AIcellIndex = null;
const _wrapper = document.querySelector(".wrapper");
const _changeTurn = function () {
if (_flag == true) {
_flag = false;
return playerOne.getSign();
} else {
_flag = true;
return playerTwo.getSign();
}
};
const _displayTurn = function () {
let turn = document.querySelector(".playerInfo__turn")
if (_flag == true) {
turn.innerHTML = `${playerOne.getName()} is your turn`;
} else {
turn.innerHTML = `${playerTwo.getName()} is your turn`;
}
};
const _evaluation = (winner) => {
if(winner == "X"){
return 1;
}else if(winner == "O"){
return -1;
}
else{
return null;
}
};
const _evaluationFunction = function (board) {
/*CHECK 1 DIAG*/
if (board[0][0] === board[1][1] && board[2][2] === board[0][0]) {
return _evaluation(board[0][0]);
/*CHECK 2 DIAG*/
}
if (board[0][2] === board[1][1] && board[2][0] === board[0][2]) {
return _evaluation(board[0][2]);
/*CHECK PAIR*/
}
for (let col = 0; col < 3; col++) {
if (board[0][col] === board[1][col] && board[1][col] === board[2][col]) {
return _evaluation(board[0][col]);
}
}
for (let row = 0; row < 3; row++) {
if (board[row][0] === board[row][1] && board[row][1] === board[row][2]) {
return _evaluation(board[row][0]);
}
}
return 0;
};
const minimax = (_board, depth, isMaximizer) => {
let result = _evaluationFunction(_board);
console.log(result);
if (result !== null) {
return result;
}
if (isMaximizer) {
let bestScore = -Infinity;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (_board[i][j] == null) {
_board[i][j] = playerOne.getSign();
let score = minimax(_board, depth + 1, false);
_board[i][j] = null;
bestScore = Math.max(score, bestScore);
}
}
}
return bestScore;
} else {
let bestScore = Infinity;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (_board[i][j] == null) {
_board[i][j] = playerTwo.getSign();
let score = minimax(_board, depth + 1, true);
_board[i][j] = null;
bestScore = Math.min(score, bestScore);
}
}
}
return bestScore;
}
};
const _setAIPlay = () => {
let bestScore = Infinity;
let bestMove;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (_board[i][j] == null) {
_board[i][j] = playerTwo.getSign();
let score = minimax(_board, 0, true);
_board[i][j] = null;
if(score < bestScore){
bestScore = score;
console.log(bestScore);
bestMove = {i, j}
}
}
}
};
_board[bestMove.i][bestMove.j] = playerTwo.getSign();
_AIrowIndex = bestMove.i;
_AIcellIndex = bestMove.j;
_displayAIPlay(_AIrowIndex, _AIcellIndex);
_changeTurn();
_checkWinner();
};
const _displayAIPlay = (rowIndex, cellIndex) => {
let AIcell = document.querySelector(`[data-row="${rowIndex}"][data-cell="${cellIndex}"]`);
AIcell.textContent = playerTwo.getSign();
}
I am trying to solve this tic-tac-toe problem with the minimax algorithm but I don't understand why it continues to place the "O" in the adjacent cell, I tried to console.log() result, and best score inside the minimax function and it looks like the recursion is working, but I don't understand why inside _setAIPlay()
if I console.log(bestScore) in the last if statement it returns me as final value or 0 or 1 and not -1 which in this case I think should be the bestscore as a minimizer.
If needed here you can find the full repo gitHub

Here is a simple implementation of a minimax algorithm for Tic Tac Toe in JavaScript. The search tree deepens until a game-over state is detected. If a win is detected, then the current player cannot play, and so the static value is negative (-10). If a draw is detected the returned value is 0.
In all other cases the search deepens. This implementation uses a minimax algorithm where the value is maximised for both players. Therefore the sign of the value coming back from a deeper evaluation is always flipped ("what is good for my opponent is bad for me, and vice versa").
If a board is found to have a winning position then the moves that lead to the shortest path to a win are prioritised. This is achieved by lowering the absolute value by 1 point every time we backtrack.
If there are several moves with an equal value, then a random one will be picked from those.
Here is the implementation, with some basic HTML:
class TicTacToe {
constructor() {
this.board = Array(9).fill(0); // 0 means "empty"
this.moves = [];
this.isWin = this.isDraw = false;
}
get turn() { // returns 1 or 2
return 1 + this.moves.length % 2;
}
get validMoves() {
return [...this.board.keys()].filter(i => !this.board[i])
}
play(move) { // move is an index in this.board
if (this.board[move] !== 0 || this.isWin) return false; // invalid move
this.board[move] = this.turn; // 1 or 2
this.moves.push(move);
// Use regular expression to detect any 3-in-a-row
this.isWin = /^(?:...)*([12])\1\1|^.?.?([12])..\2..\2|^([12])...\3...\3|^..([12]).\4.\4/.test(this.board.join(""));
this.isDraw = !this.isWin && this.moves.length === this.board.length;
return true;
}
takeBack() {
if (this.moves.length === 0) return false; // cannot undo
this.board[this.moves.pop()] = 0;
this.isWin = this.isDraw = false;
return true;
}
minimax() {
if (this.isWin) return { value: -10 };
if (this.isDraw) return { value: 0 };
let best = { value: -Infinity };
for (let move of this.validMoves) {
this.play(move);
let {value} = this.minimax();
this.takeBack();
// Reduce magnitude of value (so shorter paths to wins are prioritised) and negate it
value = value ? (Math.abs(value) - 1) * Math.sign(-value) : 0;
if (value >= best.value) {
if (value > best.value) best = { value, moves: [] };
best.moves.push(move); // keep track of equally valued moves
}
}
return best;
}
goodMove() {
let {moves} = this.minimax();
// Pick a random move when there are choices:
return moves[Math.floor(Math.random() * moves.length)];
}
}
(function main() {
const table = document.querySelector("#game");
const btnNewGame = document.querySelector("#newgame");
const btnCpuMove = document.querySelector("#cpumove");
const messageArea = document.querySelector("#message");
let game, human;
function display() {
game.board.forEach((cell, i) => table.rows[Math.floor(i / 3)].cells[i % 3].className = " XO"[cell]);
messageArea.textContent = game.isWin ? (game.turn == human ? "CPU won" : "You won")
: game.isDraw ? "It's a draw"
: game.turn == human ? "Your turn"
: "CPU is preparing move...";
table.className = game.isWin || game.isDraw || game.turn !== human ? "inactive" : "";
}
function computerMove() {
if (game.isWin || game.isDraw) return;
human = 3 - game.turn;
display();
setTimeout(() => {
game.play(game.goodMove());
display();
}, 500); // Artificial delay before computer move is calculated and played
}
function humanMove(i) {
if (game.turn !== human || !game.play(i)) return; // ignore click when not human turn, or when invalid move
display();
computerMove();
}
function newGame() {
game = new TicTacToe();
human = 1;
display();
}
table.addEventListener("click", e => humanMove(e.target.cellIndex + 3 * e.target.parentNode.rowIndex));
btnNewGame.addEventListener("click", newGame);
btnCpuMove.addEventListener("click", computerMove);
newGame();
})();
#game { border-collapse: collapse }
#game td { border: 1px solid black; width: 30px; height: 30px; text-align: center; cursor: pointer }
#game td.X, #game td.O { cursor: default }
#game td.X { color: green }
#game td.O { color: red }
#game td.X:after { content: "X" }
#game td.O:after { content: "O" }
#game.inactive { background: silver }
<table id="game">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<h4 id="message"></h4>
<button id="newgame">New Game</button>
<button id="cpumove">Let CPU play a move</button>

class TicTacToe {
constructor() {
this.board = Array(9).fill(0); // 0 means "empty"
this.moves = [];
this.isWin = this.isDraw = false;
}
get turn() { // returns 1 or 2
return 1 + this.moves.length % 2;
}
get validMoves() {
return [...this.board.keys()].filter(i => !this.board[i])
}
play(move) { // move is an index in this.board
if (this.board[move] !== 0 || this.isWin) return false; // invalid move
this.board[move] = this.turn; // 1 or 2
this.moves.push(move);
// Use regular expression to detect any 3-in-a-row
this.isWin = /^(?:...)*([12])\1\1|^.?.?([12])..\2..\2|^([12])...\3...\3|^..([12]).\4.\4/.test(this.board.join(""));
this.isDraw = !this.isWin && this.moves.length === this.board.length;
return true;
}
takeBack() {
if (this.moves.length === 0) return false; // cannot undo
this.board[this.moves.pop()] = 0;
this.isWin = this.isDraw = false;
return true;
}
minimax() {
if (this.isWin) return { value: -10 };
if (this.isDraw) return { value: 0 };
let best = { value: -Infinity };
for (let move of this.validMoves) {
this.play(move);
let {value} = this.minimax();
this.takeBack();
// Reduce magnitude of value (so shorter paths to wins are prioritised) and negate it
value = value ? (Math.abs(value) - 1) * Math.sign(-value) : 0;
if (value >= best.value) {
if (value > best.value) best = { value, moves: [] };
best.moves.push(move); // keep track of equally valued moves
}
}
return best;
}
goodMove() {
let {moves} = this.minimax();
// Pick a random move when there are choices:
return moves[Math.floor(Math.random() * moves.length)];
}
}
(function main() {
const table = document.querySelector("#game");
const btnNewGame = document.querySelector("#newgame");
const btnCpuMove = document.querySelector("#cpumove");
const messageArea = document.querySelector("#message");
let game, human;
function display() {
game.board.forEach((cell, i) => table.rows[Math.floor(i / 3)].cells[i % 3].className = " XO"[cell]);
messageArea.textContent = game.isWin ? (game.turn == human ? "CPU won" : "You won")
: game.isDraw ? "It's a draw"
: game.turn == human ? "Your turn"
: "CPU is preparing move...";
table.className = game.isWin || game.isDraw || game.turn !== human ? "inactive" : "";
}
function computerMove() {
if (game.isWin || game.isDraw) return;
human = 3 - game.turn();
display();
setTimeout(() => {
game.play(game.goodMove());
display();
}, 500); // Artificial delay before computer move is calculated and played
}
function humanMove(i) {
if (game.turn !== human || !game.play(i)) return; // ignore click when not human turn, or when invalid move
display();
computerMove();
}
function newGame() {
game = new TicTacToe();
human = 1;
display();
}
table.addEventListener("click", e => humanMove(e.target.cellIndex + 3 * e.target.parentNode.rowIndex));
btnNewGame.addEventListener("click", newGame);
btnCpuMove.addEventListener("click", computerMove);
newGame();
})();
#game { border-collapse: collapse }
#game td { border: 1px solid black; width: 30px; height: 30px; text-align: center; cursor: pointer }
#game td.X, #game td.O { cursor: default }
#game td.X { color: green }
#game td.O { color: red }
#game td.X:after { content: "X" }
#game td.O:after { content: "O" }
#game.inactive { background: silver }
<table id="game">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<h4 id="message"></h4>
<button id="newgame">New Game</button>
<button id="cpumove">Let CPU play a move</button>
class TicTacToe {
constructor() {
this.board = Array(9).fill(0); // 0 means "empty"
this.moves = [];
this.isWin = this.isDraw = false;
}
get turn() { // returns 1 or 2
return 1 + this.moves.length % 2;
}
get validMoves() {
return [...this.board.keys()].filter(i => !this.board[i])
}
play(move) { // move is an index in this.board
if (this.board[move] !== 0 || this.isWin) return false; // invalid move
this.board[move] = this.turn; // 1 or 2
this.moves.push(move);
// Use regular expression to detect any 3-in-a-row
this.isWin = /^(?:...)*([12])\1\1|^.?.?([12])..\2..\2|^([12])...\3...\3|^..([12]).\4.\4/.test(this.board.join(""));
this.isDraw = !this.isWin && this.moves.length === this.board.length;
return true;
}
takeBack() {
if (this.moves.length === 0) return false; // cannot undo
this.board[this.moves.pop()] = 0;
this.isWin = this.isDraw = false;
return true;
}
minimax() {
if (this.isWin) return { value: -10 };
if (this.isDraw) return { value: 0 };
let best = { value: -Infinity };
for (let move of this.validMoves) {
this.play(move);
let {value} = this.minimax();
this.takeBack();
// Reduce magnitude of value (so shorter paths to wins are prioritised) and negate it
value = value ? (Math.abs(value) - 1) * Math.sign(-value) : 0;
if (value >= best.value) {
if (value > best.value) best = { value, moves: [] };
best.moves.push(move); // keep track of equally valued moves
}
}
return best;
}
goodMove() {
let {moves} = this.minimax();
// Pick a random move when there are choices:
return moves[Math.floor(Math.random() * moves.length)];
}
}
(function main() {
const table = document.querySelector("#game");
const btnNewGame = document.querySelector("#newgame");
const btnCpuMove = document.querySelector("#cpumove");
const messageArea = document.querySelector("#message");
let game, human;
function display() {
game.board.forEach((cell, i) => table.rows[Math.floor(i / 3)].cells[i % 3].className = " XO"[cell]);
messageArea.textContent = game.isWin ? (game.turn == human ? "CPU won" : "You won")
: game.isDraw ? "It's a draw"
: game.turn == human ? "Your turn"
: "CPU is preparing move...";
table.className = game.isWin || game.isDraw || game.turn !== human ? "inactive" : "";
}
function computerMove() {
if (game.isWin || game.isDraw) return;
human = 3 - game.turn;
display();
setTimeout(() => {
game.play(game.goodMove());
display();
}, 500); // Artificial delay before computer move is calculated and played
}
function humanMove(i) {
if (game.turn !== human || !game.play(i)) return; // ignore click when not human turn, or when invalid move
display();
computerMove();
}
function newGame() {
game = new TicTacToe();
human = 1;
display();
}
table.addEventListener("click", e => humanMove(e.target.cellIndex + 3 * e.target.parentNode.rowIndex));
btnNewGame.addEventListener("click", newGame);
btnCpuMove.addEventListener("click", computerMove);
newGame();
})();
#game { border-collapse: collapse }
#game td { border: 1px solid black; width: 30px; height: 30px; text-align: center; cursor: pointer }
#game td.X, #game td.O { cursor: default }
#game td.X { color: green }
#game td.O { color: red }
#game td.X:after { content: "X" }
#game td.O:after { content: "O" }
#game.inactive { background: silver }
<table id="game">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<h4 id="message"></h4>
<button id="newgame">New Game</button>
<button id="cpumove">Let CPU play a move</button>

Variable only works locally

I wrote some functions involving prime factorization and I noticed that when I identified my test paragraph (for testing the results of functions and such) as document.getElementById("text"), it worked fine. However, when I declared a global variable text as var text = document.getElementById("text"), and then substituted in text for the longer version, it no longer worked. I did, however, notice that it worked when I locally declared text. Why is this and how can I fix it? My JSFiddle is here: https://jsfiddle.net/MCBlastoise/3ehcz214/
And this is my code:
var text = document.getElementById("text");
function isPrime(num) {
var lastDigit = parseInt((num + "").split("").reverse()[0]);
if (typeof num !== "number" || num <= 1 || num % 1 !== 0) {
return undefined;
}
else if (num === 2) {
return true;
}
else if (lastDigit === 0 || lastDigit === 2 || lastDigit === 4 || lastDigit === 5 || lastDigit === 6 || lastDigit === 8) {
return false;
}
else {
for (var i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
}
function factorSplit(dig) {
if (typeof dig !== "number" || dig <= 1 || dig % 1 !== 0) {
return undefined;
}
else if (dig === 2) {
return undefined;
}
else {
var factor;
for (var i = 2; i < dig; i++) {
if (dig % i === 0) {
factor = i;
break;
}
}
if (factor === undefined) {
return undefined;
}
else {
return [factor, (dig / factor)];
}
}
}
function allPrimes(arr) {
if (Array.isArray(arr) === false || arr.length < 1) {
return undefined;
}
else {
for (var i = 0; i < arr.length; i++) {
if (isPrime(arr[i]) !== true) {
return false;
}
}
return true;
}
}
function primeFactors(int) {
if (typeof int !== "number" || int <= 1) {
return undefined;
}
else if (isPrime(int) === true) {
return false;
}
else {
var initFactors = factorSplit(int);
while (allPrimes(initFactors) !== true) {
initFactors = initFactors.concat(factorSplit(initFactors[initFactors.length - 1]));
initFactors.splice((initFactors.length - 3), 1);
}
return initFactors;
}
}
function listPrimes() {
repeat = setInterval(findPrime, 1);
}
var primeInts = [2];
var check;
function findPrime() {
var i = primeInts[primeInts.length - 1] + 1;
if (check === undefined) {
check = true;
text.innerHTML = primeInts[0];
}
else {
while (isPrime(i) !== true) {
i++;
}
primeInts.push(i);
text.innerHTML += ", " + primeInts[primeInts.length - 1];
}
}
//text.innerHTML = isPrime(6);
<div onclick="listPrimes()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
<p id="text"></p>

The text is global, you just need to make sure the whole script file is included in the html. Here's an example of what I mean
Here in code snippets stackoverflow does this for us already.
var text = document.getElementById("text");
function isPrime(num) {
var lastDigit = parseInt((num + "").split("").reverse()[0]);
if (typeof num !== "number" || num <= 1 || num % 1 !== 0) {
return undefined;
} else if (num === 2) {
return true;
} else if (lastDigit === 0 || lastDigit === 2 || lastDigit === 4 || lastDigit === 5 || lastDigit === 6 || lastDigit === 8) {
return false;
} else {
for (var i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
}
function factorSplit(dig) {
if (typeof dig !== "number" || dig <= 1 || dig % 1 !== 0) {
return undefined;
} else if (dig === 2) {
return undefined;
} else {
var factor;
for (var i = 2; i < dig; i++) {
if (dig % i === 0) {
factor = i;
break;
}
}
if (factor === undefined) {
return undefined;
} else {
return [factor, (dig / factor)];
}
}
}
function allPrimes(arr) {
if (Array.isArray(arr) === false || arr.length < 1) {
return undefined;
} else {
for (var i = 0; i < arr.length; i++) {
if (isPrime(arr[i]) !== true) {
return false;
}
}
return true;
}
}
function primeFactors(int) {
if (typeof int !== "number" || int <= 1) {
return undefined;
} else if (isPrime(int) === true) {
return false;
} else {
var initFactors = factorSplit(int);
while (allPrimes(initFactors) !== true) {
initFactors = initFactors.concat(factorSplit(initFactors[initFactors.length - 1]));
initFactors.splice((initFactors.length - 3), 1);
}
return initFactors;
}
}
function listPrimes() {
repeat = setInterval(findPrime, 1);
}
var primeInts = [2];
var check;
function findPrime() {
var i = primeInts[primeInts.length - 1] + 1;
if (check === undefined) {
check = true;
text.innerHTML = primeInts[0];
} else {
while (isPrime(i) !== true) {
i++;
}
primeInts.push(i);
text.innerHTML += ", " + primeInts[primeInts.length - 1];
}
}
function test() {
console.log("inside test1")
console.log(text);
text.innerHTML = "testtt"
}
function test2() {
console.log("inside test2")
console.log(text);
text.innerHTML = "testtt2"
}
text.innerHTML = isPrime(6);
<div onclick="test()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
<p id="text"></p>
<div onclick="test2()" style="cursor:pointer; background-color:black; width:30px; height:30px"></div>
In the head the script runs/loads first and because you don't have the var's in a function they are never re-used they remain with the original value which is null since the document didn't exist at that time, then when the page loads all it has is access to the functions a call to the global var is null. This is why the code previously only worked when text = document.getElementById('text') was in a function.

Why output is showing on next click in Reactjs

I am new to ReactJS that is why my code might have few errors,but I don't want that for now.I am creating a tic-tac-toe,everything is working fine except for that the winner is updating on next onMouseUp event. I searched everywhere but I am not able to find the error.
Here is the code.
var Mycheck = React.createClass({
getInitialState: function() {
return {
disppp: "block",
disppp2: "none",
cnt: 0,
active: 1,
turnNum: 0
}
},
handleClick: function(event, key) {
this.setState({
cnt: this.state.cnt + 1
})
var divId = parseInt(event.target.id);
var valvar = [];
if (this.state.active) {
if (this.state.cnt < 9) {
this.setState({
turnNum: this.state.turnNum + 1
})
if (this.state.cnt % 2 == 0) {
valvar[key] = "X";
this.setState(valvar)
this.setState({
disppp: "none",
disppp2: "block"
})
} else {
valvar[key] = "O";
this.setState(valvar)
this.setState({
disppp: "block",
disppp2: "none"
})
}
} else {
alert("GAME DRAW");
}
}
this.Findvalue();
},
Findvalue: function() {
var arr = [];
var winner;
var resultant = {
r1: [1, 2, 3],
r2: [4, 5, 6],
r3: [7, 8, 9],
r4: [1, 4, 7],
r5: [2, 5, 8],
r6: [3, 6, 9],
r7: [1, 5, 9],
r8: [3, 5, 7]
};
for (var i = 1; i < 10; i++) {
arr[i] = document.getElementById(i).innerHTML;
}
if (arr[resultant.r1[0]] == arr[resultant.r1[1]] && arr[resultant.r1[0]] == arr[resultant.r1[2]] && arr[resultant.r1[0]] != "" && arr[resultant.r1[1]] != "" && arr[resultant.r1[2]] != "") {
winner = arr[resultant.r1[0]];
}
if (arr[resultant.r2[0]] == arr[resultant.r2[1]] && arr[resultant.r2[0]] == arr[resultant.r2[2]] && arr[resultant.r2[0]] != "" && arr[resultant.r2[1]] != "" && arr[resultant.r2[2]] != "") {
winner = arr[resultant.r2[0]];
}
if (arr[resultant.r3[0]] == arr[resultant.r3[1]] && arr[resultant.r3[0]] == arr[resultant.r3[2]] && arr[resultant.r3[0]] != "" && arr[resultant.r3[1]] != "" && arr[resultant.r3[2]] != "") {
winner = arr[resultant.r3[0]];
}
if (arr[resultant.r4[0]] == arr[resultant.r4[1]] && arr[resultant.r4[0]] == arr[resultant.r4[2]] && arr[resultant.r4[0]] != "" && arr[resultant.r4[1]] != "" && arr[resultant.r4[2]] != "") {
winner = arr[resultant.r4[0]];
}
if (arr[resultant.r5[0]] == arr[resultant.r5[1]] && arr[resultant.r5[0]] == arr[resultant.r5[2]] && arr[resultant.r5[0]] != "" && arr[resultant.r5[1]] != "" && arr[resultant.r5[2]] != "") {
winner = arr[resultant.r5[0]];
}
if (arr[resultant.r6[0]] == arr[resultant.r6[1]] && arr[resultant.r6[0]] == arr[resultant.r6[2]] && arr[resultant.r6[0]] != "" && arr[resultant.r6[1]] != "" && arr[resultant.r6[2]] != "") {
winner = arr[resultant.r6[0]];
}
if (arr[resultant.r7[0]] == arr[resultant.r7[1]] && arr[resultant.r7[0]] == arr[resultant.r7[2]] && arr[resultant.r7[0]] != "" && arr[resultant.r7[1]] != "" && arr[resultant.r7[2]] != "") {
winner = arr[resultant.r7[0]];
}
if (arr[resultant.r8[0]] == arr[resultant.r8[1]] && arr[resultant.r8[0]] == arr[resultant.r8[2]] && arr[resultant.r8[0]] != "" && arr[resultant.r8[1]] != "" && arr[resultant.r8[2]] != "") {
winner = arr[resultant.r8[0]];
}
if (winner == "X") {
this.setState({
active: 0
})
alert("WINNER IS PLAYER 1");
}
if (winner == "O") {
this.setState({
active: 0
})
alert("WINNER IS PLAYER 2");
}
},
render: function() {
var divVal = "";
var i = 0;
return ( < div >
< div className = "turn_num" > TURN NUMBER: {
this.state.turnNum + 1
} < /div>
<button style={{display:this.state.disppp}}>PLAYER 1 FOR X</button >
< button style = {
{
display: this.state.disppp2
}
} > PLAYER 2 FOR O < /button><br/ > < br / >
< button className = "square"
id = "1"
onMouseUp = {
e => this.handleClick(e, "valvar1")
}
disabled = {
this.state.valvar1
} > {
this.state.valvar1
} < /button>
<button className="square" id="2" onMouseUp={e => this.handleClick(e,"valvar2")} disabled={this.state.valvar2}>{this.state.valvar2}</button >
< button className = "square"
id = "3"
onMouseUp = {
e => this.handleClick(e, "valvar3")
}
disabled = {
this.state.valvar3
} > {
this.state.valvar3
} < /button>
<button className="square clearB" id="4" onMouseUp={e => this.handleClick(e,"valvar4")} disabled={this.state.valvar4}>{this.state.valvar4}</button >
< button className = "square"
id = "5"
onMouseUp = {
e => this.handleClick(e, "valvar5")
}
disabled = {
this.state.valvar5
} > {
this.state.valvar5
} < /button>
<button className="square"id="6" onMouseUp={e => this.handleClick(e,"valvar6")} disabled={this.state.valvar6}>{this.state.valvar6}</button >
< button className = "square clearB"
id = "7"
onMouseUp = {
e => this.handleClick(e, "valvar7")
}
disabled = {
this.state.valvar7
} > {
this.state.valvar7
} < /button>
<button className="square" id="8" onMouseUp={e => this.handleClick(e,"valvar8")} disabled={this.state.valvar8}>{this.state.valvar8}</button >
< button className = "square"
id = "9"
onMouseUp = {
e => this.handleClick(e, "valvar9")
}
disabled = {
this.state.valvar9
} > {
this.state.valvar9
} < /button><br/ > < br / > < br / >
< /div>
);
}
});
ReactDOM.render(<Mycheck></Mycheck > , document.getElementById("container"));
.square {
height: 50px;
width: 50px;
border: 1px solid black;
background: none;
float: left;
padding: 10px;
text-align: center;
font-size: 25px;
font-weight: bold;
color: #146fbe;
}
.clearB {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

How to change TextBox input language to Persian as you type in

I am working on a website in which users should fill some fields in different languages.
I don't want the users to change their writing language using Alt+Shift key combination but rather i want the input language to be changed automatically to either Persian or English.
Is there any way to do that?

Use the following script:
if (typeof HTMLElement!="undefined" && ! HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) {
switch (where) {
case 'beforeBegin':
this.parentNode.insertBefore(parsedNode,this)
break;
case 'afterBegin':
this.insertBefore(parsedNode,this.firstChild);
break;
case 'beforeEnd':
this.appendChild(parsedNode);
break;
case 'afterEnd':
if (this.nextSibling)
this.parentNode.insertBefore(parsedNode,this.nextSibling);
else
this.parentNode.appendChild(parsedNode);
break;
}
}
HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where,parsedHTML)
}
HTMLElement.prototype.insertAdjacentText = function (where,txtStr) {
var parsedText = document.createTextNode(txtStr)
this.insertAdjacentElement(where,parsedText)
}
}
var FarsiType = {
// Farsi keyboard map based on Iran Popular Keyboard Layout
farsiKey: [
32, 33, 34, 35, 36, 37, 1548, 1711,
41, 40, 215, 43, 1608, 45, 46, 47,
48, 49, 50, 51, 52, 53, 54, 55,
56, 57, 58, 1705, 44, 61, 46, 1567,
64, 1616, 1584, 125, 1609, 1615, 1609, 1604,
1570, 247, 1600, 1548, 47, 8217, 1583, 215,
1563, 1614, 1569, 1613, 1601, 8216, 123, 1611,
1618, 1573, 126, 1580, 1688, 1670, 94, 95,
1662, 1588, 1584, 1586, 1740, 1579, 1576, 1604,
1575, 1607, 1578, 1606, 1605, 1574, 1583, 1582,
1581, 1590, 1602, 1587, 1601, 1593, 1585, 1589,
1591, 1594, 1592, 60, 124, 62, 1617
],
Type: true,
counter: 0,
ShowChangeLangButton: 1, // 0: Hidden / 1: Visible
KeyBoardError: 0, // 0: Disable FarsiType / 1: Show Error
ChangeDir: 2, // 0: No Action / 1: Do Rtl-Ltr / 2: Rtl-Ltr button
UnSupportedAction: 0 //0: Disable FarsiType / 1: Low Support
}
FarsiType.enable_disable = function(Dis) {
var invis, obj;
if (!Dis.checked) {
FarsiType.Type = true;
disable = false;
color = 'darkblue';
} else {
FarsiType.Type = false;
disable = true;
color = '#ECE9D8';
}
if (FarsiType.ShowChangeLangButton == 1) {
for (var i=1; i<= FarsiType.counter; i++) {
obj = document.getElementById('FarsiType_button_' + i);
obj.disabled = disable;
obj.style.backgroundColor = color;
}
}
}
FarsiType.Disable = function() {
FarsiType.Type = false;
var Dis = document.getElementById('disableFarsiType')
if (Dis != null) {
Dis.checked = true;
}
if (FarsiType.ShowChangeLangButton == 1) {
for (var i=1; i<= FarsiType.counter; i++) {
obj = document.getElementById('FarsiType_button_' + i);
obj.disabled = true;
obj.style.backgroundColor = '#ECE9D8';
}
}
}
FarsiType.init = function() {
var Inputs = document.getElementsByTagName('INPUT');
for (var i=0; i<Inputs.length; i++) {
if (Inputs[i].type.toLowerCase() == 'text' && (Inputs[i].lang.toLowerCase() == 'fa' || Inputs[i].lang.toLowerCase() == 'fa-ir')) {
FarsiType.counter++;
new FarsiType.KeyObject(Inputs[i], FarsiType.counter);
}
}
var Areas = document.getElementsByTagName('TEXTAREA');
for (var i=0; i<Areas.length; i++) {
if (Areas[i].lang.toLowerCase() == 'fa' || Areas[i].lang.toLowerCase() == 'fa-ir') {
FarsiType.counter++;
new FarsiType.KeyObject(Areas[i], FarsiType.counter);
}
}
var Dis = document.getElementById('disableFarsiType')
if (Dis != null) {
FarsiType.enable_disable (Dis);
Dis.onclick = new Function( "FarsiType.enable_disable (this);" )
}
}
FarsiType.KeyObject = function(z,x) {
GenerateStr = "";
if (FarsiType.ShowChangeLangButton == 1) {
GenerateStr = GenerateStr + "<input type='button' id=FarsiType_button_"+x+" style='border: none; background-color:darkblue; font-size:11; color:white; font-family:tahoma; padding: 1px; margin: 1px; width: auto; height: auto;' value='FA' /> ";
}
if (FarsiType.ChangeDir == 2) {
GenerateStr = GenerateStr + "<input type='button' id=FarsiType_ChangeDir_"+x+" style='border: none; background-color:darkblue; font-size:11; color:white; font-family:tahoma; padding: 1px; margin: 1px; width: auto; height: auto;' value='RTL' />"
}
z.insertAdjacentHTML("afterEnd", GenerateStr);
if (FarsiType.ShowChangeLangButton == 1) {
z.bottelm = document.getElementById ('FarsiType_button_' + x);
z.bottelm.title = 'Change lang to english';
}
if (FarsiType.ChangeDir == 2) {
z.Direlm = document.getElementById ('FarsiType_ChangeDir_' + x);
}
z.farsi = true;
z.dir = "rtl";
z.align = "right";
z.style.textAlign = z.align;
z.style.direction = z.dir;
setSelectionRange = function(input, selectionStart, selectionEnd) {
input.focus()
input.setSelectionRange(selectionStart, selectionEnd)
}
ChangeDirection = function() {
if (z.dir == "rtl") {
z.dir = "ltr";
z.align = "left";
z.Direlm.value = "LTR";
z.Direlm.title = "Change direction: Right to Left"
} else {
z.dir = "rtl";
z.align = "right";
z.Direlm.value = "RTL";
z.Direlm.title = "Change direction: Left to Right"
}
z.style.textAlign = z.align;
z.style.direction = z.dir;
z.focus();
}
ChangeLang = function(e, ze) {
if(ze)
z = ze;
if (FarsiType.Type) {
if (z.farsi) {
z.farsi = false;
if (FarsiType.ShowChangeLangButton == 1) {
z.bottelm.value = "EN";
z.bottelm.title = 'Change lang to persian';
}
if (FarsiType.ChangeDir == 1) {
z.style.textAlign = "left";
z.style.direction = "ltr";
}
} else {
z.farsi = true;
if (FarsiType.ShowChangeLangButton == 1) {
z.bottelm.value = "FA";
z.bottelm.title = 'Change lang to english';
}
if (FarsiType.ChangeDir == 1) {
z.style.textAlign = "right";
z.style.direction = "rtl";
}
}
z.focus();
}
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
return false;
}
Convert = function(e) {
if (e == null)
e = window.event;
var key = e.which || e.charCode || e.keyCode;
var eElement = e.target || e.originalTarget || e.srcElement;
if (e.ctrlKey && key == 32) {
ChangeLang(e, z);
}
if (FarsiType.Type) {
if (
(e.charCode != null && e.charCode != key) ||
(e.which != null && e.which != key) ||
(e.ctrlKey || e.altKey || e.metaKey) ||
(key == 13 || key == 27 || key == 8)
) return true;
//check windows lang
if (key > 128) {
if (FarsiType.KeyBoardError == 0) {
FarsiType.Disable();
} else {
alert("Please change your windows language to English");
return false;
}
}
// If Farsi
if (FarsiType.Type && z.farsi) {
//check CpasLock
if ((key >= 65 && key <= 90&& !e.shiftKey) || (key >= 97 && key <= 122 ) && e.shiftKey) {
alert("Caps Lock is On. To prevent entering farsi incorrectly, you should press Caps Lock to turn it off.");
return false;
}
// Shift-space -> ZWNJ
if (key == 32 && e.shiftKey)
key = 8204;
else
key = FarsiType.farsiKey[key-32];
key = typeof key == 'string' ? key : String.fromCharCode(key);
// to farsi
try {
var docSelection = document.selection;
var selectionStart = eElement.selectionStart;
var selectionEnd = eElement.selectionEnd;
if (typeof selectionStart == 'number') {
//FOR W3C STANDARD BROWSERS
var nScrollTop = eElement.scrollTop;
var nScrollLeft = eElement.scrollLeft;
var nScrollWidth = eElement.scrollWidth;
eElement.value = eElement.value.substring(0, selectionStart) + key + eElement.value.substring(selectionEnd);
setSelectionRange(eElement, selectionStart + key.length, selectionStart + key.length);
var nW = eElement.scrollWidth - nScrollWidth;
if (eElement.scrollTop == 0) { eElement.scrollTop = nScrollTop }
} else if (docSelection) {
var nRange = docSelection.createRange();
nRange.text = key;
nRange.setEndPoint('StartToEnd', nRange);
nRange.select();
}
} catch(error) {
try {
// IE
e.keyCode = key
} catch(error) {
try {
// OLD GECKO
e.initKeyEvent("keypress", true, true, document.defaultView, false, false, true, false, 0, key, eElement);
} catch(error) {
//OTHERWISE
if (FarsiType.UnSupportedAction == 0) {
alert('Sorry! no FarsiType support')
FarsiType.Disable();
var Dis = document.getElementById('disableFarsiType')
if (Dis != null) {
Dis.disabled = true;
}
return false;
} else {
eElement.value += key;
}
}
}
}
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
}
return true;
}
if (FarsiType.ShowChangeLangButton == 1) { z.bottelm.onmouseup = ChangeLang; }
if (FarsiType.ChangeDir == 2) { z.Direlm.onmouseup = ChangeDirection; }
z.onkeypress = Convert;
}
if (window.attachEvent) {
window.attachEvent('onload', FarsiType.init)
} else if (window.addEventListener) {
window.addEventListener('load', FarsiType.init, false)
}
Now all you have to do is to create a text box and set its Lang attribute to "fa-IR".
<input type="textbox" name="text1" Lang="fa-IR" />
or
<asp:TextBox ID="txt_name" runat="Server" Lang="fa-IR" />
Load your page and it's done!