Develop Reference

problem using .split() method in a function but it works on console.log

the problem is only in the bottom function objectPutter
specifically the line with wowza.split(' '); labelled with the comment
let eq
let x = null
let bracketNum = 0
let k = 0
let pre = 0
class subEqCreator { //subEq object
constructor() {
this.precede = 0;
this.text = '';
}
parser() {
this.text += eq[k]
}
ma() {
this.text.split(' ')
}
};
function trigger() { //used for HTML onClick method
show();
brackets();
subEqDynamic()
parseEquation();
objectPutter()
};
function show() {
const recent = document.querySelector("ol");
const txt = document.getElementById('input');
eq = txt.value;
li = document.createElement('li');
li.innerText = eq;
recent.appendChild(li);
txt.value = '';
};
function brackets() { //counts how many brackets appear
for (let i = 0; i < eq.length; i++) {
if (eq[i] == "(") {
bracketNum++;
};
};
};
let subEqDynamic = function() { // creates a new object for each bracket
for (let count = 0; count <= bracketNum; count++) {
this['subEq' + count] = x = new subEqCreator()
};
};
function parseEquation() { // assign characters to SubEq object
let nextIndex = 0;
let currentIndex = 0;
let lastIndex = [0];
let eqLen = eq.length;
let nex = this['subEq' + nextIndex]
for (k; k < eqLen; k++) {
if (eq[k] == "(") {
nextIndex++;
pre++
this['subEq' + currentIndex].text += '( )';
this['subEq' + nextIndex].precede = pre;
lastIndex.push(currentIndex);
currentIndex = nextIndex;
} else if (eq[k] == ")") {
pre--
currentIndex = lastIndex.pop();
} else {
this['subEq' + currentIndex].parser()
}
}
}
function objectPutter() {
for (let i = 0; i < bracketNum; i++) {
let wowza = this['subEq' + i].text
wowza.split(' '); // 🚩 why isnt it working here
console.log(subEq0);
for (let j = 1; j <= wowza.length; j += 2) { // for loop generates only odds
let ni = i++
wowza.splice(j, 0, this['subEq' + ni])
console.log(i)
}
}
}
to fix this i tried;
making a method for it ma() in the constructor.
putting in the function parseEquation above in case it was a scope issue.
also, i noticed subEq0.split(' ') worked in browser console even replicating it to the way i done it using this['subEq' + i].text.split(' ') where i = 0.
After it runs the it says .splice is not a function and console.log(subEq0) shows subEq0.text is still a string

.split() does not change the variable it returns the splitted variable

Function not returning properly when set to a variable but is when console.logged

The problem is in this function:
function minimax(newBoard,player, depth = 0) {
const availableSpots = emptySquares();
// console.log(availableSpots)
// console.log((checkGameStatus(newBoard,player) ? 'true' : 'false'))
let score = {};
if (checkGameStatus(newBoard, computerSymbol)) {
console.log("Are we hitting here? 1")
// console.log((onCheckWin(newBoard) === false))
// console.log(newBoard,"o")
score = { "score": (-100 + depth)}
return score
} else if (checkGameStatus(newBoard, playerSymbol)) {
console.log("Are we hitting here? 2")
// console.log(checkGameStatus(newBoard))
// console.log(newBoard,"o")
score = { "score": (100 - depth)}
return score
} else if (availableSpots.length === 0) {
console.log("Are we hitting here? 3")
score = { "score": 0 }
return score
}
let moves = [];
for (let i=0; i<availableSpots.length; i++) {
let move = {};
move.index = newBoard[availableSpots[i]];
newBoard[availableSpots[i]] = player;
console.table(newBoard)
if (player === computerSymbol) {
let result = minimax(newBoard, playerSymbol , depth++);
console.log(newBoard,"first");
console.log(result)
move.score = result["score"];
} else {
let result = minimax(newBoard, computerSymbol, (depth + 1));
console.log(newBoard,"first");
move.score = result.score;
}
console.log(moves,move)
newBoard[availableSpots[i]] = move.index;
moves.push(move);
console.log(moves,move)
} // end of for look
let bestMove;
if (player === computerSymbol) {
let bestScore = -10000;
for (let i=0; i<moves.length; i++) {
if (moves[i].score > bestScore) {
bestScore = moves[i].score;
bestMove = i;
// console.log(bestMove)
}
// end of for loop
}
if (player === playerSymbol) {
let bestScore = 10000;
for (let i=0; i<moves.length; i++) {
if (moves[i].score < bestScore) {
bestScore = moves[i].score;
bestMove = i;
// console.log(bestMove)
}
}
}
}
return moves[bestMove];
}
When I console.log the function inside of it, it returns an object, but when I set that function call to "result" like here:
if (player === computerSymbol) {
let result = minimax(newBoard, playerSymbol , depth++);
console.log(newBoard,"first");
console.log(result)
move.score = result["score"];
I get undefined as the result and that I can't access property of undefined. Also, I seem to have a problem with my minimax algorithm where it's just constantly choosing the next open square. This might be because I am only using an empty board at the moment. I can add more code if need be, but it seems to me that the problem exists inside the function and not from one of my external or helper functions

for-loop in for-loop doesn't execute in order with async/await function

I have a loop (with index j) in a loop (with index i) with an await function in it, after debug, I found sometimes some pair of (i,j) execute more than one time. I am totally confused -_-
Could someone explain it? Thanks so much!
Here is the code:
I add searchFunc to an input element.
async function searchFunc() {
let results = [];
let notebooksP = await queryData(url1);
notebooks = notebooksP.value;
// debugger;
for (let i = 0; i < notebooks.length; i++) {
let noteIds;
let noteIdsP = await queryData(urlBase + notebooks[i].id);
noteIds = noteIdsP.value;
debugger;
for (let j = 0; j < noteIds.length; j++) {
console.log("runing at i=", i, ", j=", j, );
let noteContentsP = await queryData(urlBase + noteIds[j].id);
let data = noteContentsP.value;
// debugger;
let content = data.content;
let idx = content.search(key);
if (idx != -1) {
let res = {};
res.notebookId = notebooks[i].id;
res.noteId = noteIds[j].id;
results.push(res);
console.log("found at i=", i, " j=", j);
}
}
}
function queryData(path) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', path);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
if (xhr.readyState == 4 && xhr.status == 200) {
var ret = xhr.responseText;
resolve({value: JSON.parse(ret)});
} else {
reject('error');
}
}
})
}
const searchContent = debounce(searchFunc, 500);
searchBox.addEventListener('input', searchContent);
function debounce(fn, wait) {
let timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}

There is a design flaw here if you are triggering a search on every keypress. This can lead to problems with ordering of responses among other things. However, ignoring this issue, one simple way around the problem you are experiencing is simply to block the function from being called twice at the same time using a variable to track when it is running:
let searching = false;
async function searchFunc() {
if (searching) {
return;
}
searching = true;
let results = [];
let notebooksP = await queryData(url1);
notebooks = notebooksP.value;
// debugger;
for (let i = 0; i < notebooks.length; i++) {
let noteIds;
let noteIdsP = await queryData(urlBase + notebooks[i].id);
noteIds = noteIdsP.value;
for (let j = 0; j < noteIds.length; j++) {
console.log("runing at i=", i, ", j=", j, );
let noteContentsP = await queryData(urlBase + noteIds[j].id);
let data = noteContentsP.value;
// debugger;
let content = data.content;
let idx = content.search(key);
if (idx != -1) {
let res = {};
res.notebookId = notebooks[i].id;
res.noteId = noteIds[j].id;
results.push(res);
console.log("found at i=", i, " j=", j);
}
}
}
searching = false;
}

database is catching wrong result from javascript

can anyone help me please? So I'm making a web app where a user can crack the vault code by clicking the numbers from 1-40. They are only allowed to click 6 sets of numbers for example "6", "20", "1", "40", "27", "15". So I have a data variable "guess" in my database with int(12) as the var numbers in this JS below. The problem is whenever I try "40", "39", "38", "37", "36", "35". The database will catch "2147483647" and I'm getting confused why, there must be something wrong in what I'm doing. I'm not really professional with JS and I'm just following some guides. This was working when I had the 0-9 numbers in the vault and int(6) in the data var "guess" inside the database. Please help, thank you!
var numbers = document.querySelectorAll('.number');
var screenSpans = document.querySelectorAll('#screen span');
var clear = document.getElementById('clear');
var enter = document.getElementById('enter');
var errorModal = document.getElementById('digitAmountAlert');
var currEmail = document.getElementById('currEmail').innerHTML.replace(/\s/g, '');
var lastModal = document.getElementById('lastModal');
var main = document.getElementById('main');
var guess = '';
var reset;
clear.addEventListener('click', function(){
reset = 0;
for (var i = screenSpans.length - 1; i >= 0; i--) {
if (screenSpans[i].innerHTML != '' && reset == 0){
screenSpans[i].innerHTML = '';
reset = 1;
}
};
});
enter.addEventListener('click', function(){
reset = 0;
for (var i = 0; i < screenSpans.length; i++) {
// Catch if they have not entered enough digits
if (screenSpans[i].innerHTML == ''){
errorModal.className = 'modal';
setTimeout(function(){
errorModal.className = 'modal hide';
}, 4000);
} else {
guess = guess+screenSpans[i].innerHTML;
if (guess.length == 12){
$.ajax({
url: "submit.php",
method: "POST",
data: { guess: guess, email: currEmail }
});
lastModal.className = 'modal';
main.className = 'hide';
}
}
};
guess = '';
});
for (var i = numbers.length - 1; i >= 0; i--) {
numbers[i].addEventListener('click', function(){
reset = 0;
nextSpan(this.innerHTML);
});
};
function nextSpan (currNumber){
for (var i = 0; i < screenSpans.length; i++) {
if (screenSpans[i].innerHTML == '' && reset == 0){
screenSpans[i].innerHTML = currNumber;
reset = 1;
}
};
}
/*
|---------------------------------------------------
| FORM SUBMIT CHECK
|---------------------------------------------------
*/
var submitButton = document.getElementById('startButton');
var form = document.getElementById('form');
var goAhead = true;
submitButton.addEventListener('click', function(){
var i, j, q = [];
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].nodeName == "INPUT"){
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
var inputValue = encodeURIComponent(form.elements[i].value)
if ((inputValue == '' || inputValue == null) && (form.elements[i].name != 'online')){
// NOT COMPLETE
goAhead = false;
console.log(form.elements[i].name)
}
}
}
if (goAhead){
// SUBMIT
document.getElementById('form').submit();
} else {
this.innerHTML = "Please fill out all the fields & try again";
setTimeout(function(){
submitButton.innerHTML = "Let's Play!";
}, 7000);
goAhead = true;
}
});

Javascript: scope effect despite order of execution

Please note: This is not a question about scope, per se. I understand that in order to make the code work, I should make a deep copy of the variable board rather than assigning var tboard = board. However, I am not clear why making a shallow copy has the effect I describe below.
I am experiencing something I find baffling. Basically, a global variable (board) gets altered and I have no clue how. board is initialized in the function NewGame() (which is called from select()) as an empty array. After it is initialized, nothing else is called until the user clicks a square on the board (assuming the user has selected Xs for simplicity). When that happens, the function playerMove() is called. The baffling thing is that console.log(board) at the top of playerMove() prints out an array that has an x is the clicked position and os everywhere else (ie not empty). This is bizarre because the board is empty at the end of select() (which called NewGame()) and nothing else should happen in between. To demonstrate this, I print out the function name at the top of each function and I print out the board variable in the select() function and playerMove() function to show that it changes despite nothing else being called. Please note that to get this behavior, refresh the page (otherwise the board variable starts out full of os). I think this must be somewhat an issue of scope (because I am not making a deep copy of board) but it's strange because I have no clue what is being called that is changing the variable before it gets printed out at the top of playerMove().
Here is the link to my pen and the code: http://codepen.io/joshlevy89/pen/MKjxop?editors=101
$(document).ready(function() {
var pSym; // player's symbol
var cSym; // computer's symbol
var board;
var whosMove; // can be "player" or "computer" or "neither"
var gameOver;
setup();
$("#newgame").on('click', '#X', select);
$("#newgame").on('click', '#O', select);
$("#restart").on('click', setup);
$("table").on('click', 'td', playerMove);
function playerMove()
{
console.log('playerMove');
console.log(board);
if (whosMove === "player")
{
var val = $(this).data('value');
$('#g' + val).text(pSym);
var arr = PositionToCoords(val);
board[arr[0]][arr[1]] = pSym;
var tboard = board;
var gc = gameCheck(tboard);
if (gc>=0)
{
endGame(gc);
setTimeout(function(){setup();}, 1000);
return;
}
whosMove = "computer";
computerMove();
}
}
function computerMove() {
console.log('computerMove');
//var p1 = Math.floor(Math.random() * 3);
//var p2 = Math.floor(Math.random() * 3);
var tboard = board;
var pos = chooseMove(tboard);
var arr = PositionToCoords(pos);
board[arr[0]][arr[1]] = cSym;
DrawPosition(arr[0], arr[1], cSym);
var tboard = board;
var gc = gameCheck(tboard);
if (gc>=0) {
endGame(gc);
setTimeout(function(){setup();}, 1000);
return;
}
whosMove = "player";
}
function chooseMove(inboard) {
console.log('chooseMove');
// get the possible moves
var moves=[];
var scores = [];
for (var i=1;i<10;i++) {
var arr = PositionToCoords(i);
if (inboard[arr[0]][arr[1]] === undefined) {
moves.push(i);
var tboard = inboard;
tboard[arr[0]][arr[1]] = cSym;
var gc = gameCheck(tboard);
scores.push(gc);
}
}
//console.log(moves);
//console.log(scores);
return moves[0]; // TEMPORARY
}
function endGame(gc) {
console.log('endGame');
var str;
if (gc===1) { // somebody won
if (whosMove==="player"){
str = "You Won!"
}
else {
str = "You Lost :(";
}
}
else if (gc === 0){//draw
str = "It's a draw."
}
html = '<div id="closer">' + str + '</div>';
$('#endgame').html(html);
}
function gameCheck(tboard) {
console.log('gameCheck');
// get symbol to check for
var sym;
if (whosMove === "player") {
sym = pSym;
} else {
sym = cSym;
}
// check if in a row
var hrow;
var vrow;
// check for horizonal row
for (var i = 0; i < 3; i++) {
hrow = true;
vrow = true;
for (var j = 0; j < 3; j++) {
if (tboard[i][j] !== sym) {
hrow = false;
}
if (tboard[j][i] !== sym) {
vrow = false;
}
}
if ((hrow) || (vrow)) {
return 1;
}
}
var fdrow = true;
var bdrow = true;
for (var i = 0; i < 3; i++) {
if (tboard[i][i] !== sym) {
fdrow = false;
}
if (tboard[i][2 - i] !== sym) {
bdrow = false;
}
}
if ((fdrow) || (bdrow)) {
return 1;
}
// otherwise, check if board is full
var full = true;
for (var i = 1; i < 10; i++) {
var arr = PositionToCoords(i);
if (tboard[arr[0]][arr[1]] === undefined) {
full = false;
break;
}
}
if (full === true) {
return 0;
}
// if neither 0 (tie) or win (1), return -1 (game not over)
return -1;
}
function select() {
console.log('select');
pSym = $(this).data('value');
$('#newgame').html('');
NewGame();
console.log(board);
}
function setup() {
console.log('select');
$('#endgame').html('');
html = '<div id="opener">Xs or Os? <div id="buttons">';
html += '<div id="X" data-value="X" class="btn btn-default">Xs</div>';
html += '<div id="O" data-value="O" class="btn btn-default">Os</div>';
html += '</div></div>';
$('#newgame').html(html);
}
function NewGame() {
console.log('NewGame');
$('td').empty();
board = new Array(3);
for (i = 0; i < 3; i++) {
board[i] = new Array(3)
};
if (pSym === "X") {
cSym = "O";
whosMove = "player";
} else {
cSym = "X";
whosMove = "computer";
computerMove();
}
}
function DrawPosition(p1, p2, sym) {
console.log('DrawPosition');
var pos = p1 * 3 + (p2 + 1);
$("#g" + pos).text(sym)
}
function PositionToCoords(pos) {
console.log('PositionToCoords');
var p1 = Math.ceil(pos / 3) - 1;
var p2 = ((pos - 1) % 3);
var arr = [p1, p2];
return arr;
}
});
Thanks in advance.

Simply add the break in the for loop fixes the problem. Am I missing anything?
function chooseMove(inboard) {
console.log('chooseMove');
// get the possible moves
var moves = [];
var scores = [];
for (var i = 1; i < 10; i++) {
var arr = PositionToCoords(i);
if (inboard[arr[0]][arr[1]] === undefined) {
moves.push(i);
var tboard = inboard;
tboard[arr[0]][arr[1]] = cSym;
var gc = gameCheck(tboard);
scores.push(gc);
break; // <<<<<<<<<<<< This break guarantees that the computer only makes one move
}
}
//console.log(moves);
//console.log(scores);
return moves[0]; // TEMPORARY
}