We Keep Coding

How do I iterate over an async function without completely skipping over all the steps in the function?

Here is the link to my repo's github page, so you can properly see what I mean.
I am currently having an issue with my triviaGame function when trying to make it recursive, but it's sort of "backfiring" on me in a sense.
You'll notice after you answer the first question, everything seems fine. It goes to the next question fine. After that though, it seems like the iterations of it double? The next answer it skips 2. After that, 4. And finally the remaining 2 (adding up to 10, due to how I am iterating over them).
How might I be able to correctly iterate over a recursive function, so it correctly calls all 10 times, and then returns when it is done?
Been struggling with this for hours, and just can't seem to get it to work. My javascript code is below, sorry for any headaches that it may give you. I know I make some questionable programming decisions. Ignore some of the commented out stuff, it's not finished code yet. I'm a beginner, and hope that once I learn what's going on here it will stick with me, and I don't make a stupid mistake like this again.
const _URL = "https://opentdb.com/api.php?amount=1&category=27&type=multiple";
const _questionHTML = document.getElementById("question");
const _answerOne = document.getElementById("answer-1");
const _answerTwo = document.getElementById("answer-2");
const _answerThree = document.getElementById("answer-3");
const _answerFour = document.getElementById("answer-4");
const btns = document.querySelectorAll("button[id^=answer-]");
var runCount = 1;
var correct = 0;
// Credits to my friend Jonah for teaching me how to cache data that I get from an API call.
var triviaData = null;
async function getTrivia() {
return fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple")
.then((res) => res.json())
.then((res) => {
triviaData = res;
return res;
});
}
// anywhere I want the trivia data:
// const trivia = await getTrivia() --- makes the call, or uses the cached data
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
};
async function triviaGame() {
const trivia = await getTrivia();
async function appendData() {
let totalAnswers = [
...trivia.results[0].incorrect_answers,
trivia.results[0].correct_answer,
];
// Apparently I need 2 different arrays to sort them because array variables are stored by reference? Learn something new everyday I guess.
let totalAnswers2 = [...totalAnswers];
let sorted = shuffleArray(totalAnswers2);
// Ensures the proper symbol shows instead of the HTML entities
const doc = new DOMParser().parseFromString(
trivia.results[0].question,
"text/html"
);
_questionHTML.textContent = doc.documentElement.textContent;
console.log(trivia.results[0].correct_answer, "- Correct Answer");
// Appends info to the DOM
_answerOne.textContent = sorted[0];
_answerTwo.textContent = sorted[1];
_answerThree.textContent = sorted[2];
_answerFour.textContent = sorted[3];
}
async function checkAnswer() {
btns.forEach((btn) => {
btn.addEventListener("click", (event) => {
console.log(runCount);
if (event.target.textContent === trivia.results[0].correct_answer) {
event.target.style.backgroundColor = "#52D452";
// Disables all buttons after one has been clicked.
btns.forEach((btn) => {
btn.disabled = true;
});
setTimeout(() => {
if (runCount === 10) {
return;
}
runCount++;
correct++;
btns.forEach((btn) => {
btn.disabled = false;
});
btn.style.backgroundColor = "";
document.getElementById(
"amount-correct"
).textContent = `${correct}/10`;
triviaGame();
}, 2000);
} else {
event.target.style.backgroundColor = "#FF3D33";
btns.forEach((btn) => {
btn.disabled = true;
});
// document.getElementById("correct-text").textContent =
// trivia.results[0].correct_answer;
// document.getElementById("correct-answer").style.visibility =
// "visible";
setTimeout(() => {
if (runCount === 10) {
return;
}
// document.getElementById("correct-answer").style.visibility =
// "hidden";
btns.forEach((btn) => {
btn.disabled = false;
btn.style.backgroundColor = "";
});
runCount++;
triviaGame();
}, 3500);
}
});
});
}
checkAnswer();
appendData();
}
triviaGame();
Any/All responses are much appreciated and repsected. I could use any help y'all are willing to give me. The past 6 hours have been a living hell for me lol.

It's skipping questions once an answer is clicked because every time a button is clicked, another event listener is added to the button, while the original one is active:
On initial load: triviaGame() runs which makes checkAnswer() run which adds event listeners to each of the buttons.
Event listeners on buttons: 1.
Answer button is clicked, triviaGame() runs which makes checkAnswer() run which adds event listeners to each of the buttons.
Event listeners on buttons: 2.
Answer button is clicked, triviaGame() runs twice (from the 2 listeners attached) which makes checkAnswer() run twice where both invocations adds event listeners to each of the buttons.
Event listeners on buttons: 4.
etc.
To fix this, I moved the content of checkAnswer() outside of any functions so it only ever runs once. However, doing this, it loses reference to the upper scope variable trivia. To resolve this, I used the triviaData variable instead which checkAnswer() would have access to and I change references in appendData() to match this. Now, triviaGame() function only exists to call appendData() function inside it; there is little point in this so I merge the two functions together into one function, instead of two nested inside each other.
const _URL = "https://opentdb.com/api.php?amount=1&category=27&type=multiple";
const _questionHTML = document.getElementById("question");
const _answerOne = document.getElementById("answer-1");
const _answerTwo = document.getElementById("answer-2");
const _answerThree = document.getElementById("answer-3");
const _answerFour = document.getElementById("answer-4");
const btns = document.querySelectorAll("button[id^=answer-]");
var runCount = 1;
var correct = 0;
// Credits to my friend Jonah for teaching me how to cache data that I get from an API call.
var triviaData = null;
async function getTrivia() {
return fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple")
.then((res) => res.json())
.then((res) => {
triviaData = res;
return res;
});
}
// anywhere I want the trivia data:
// const trivia = await getTrivia() --- makes the call, or uses the cached data
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
};
async function appendData() {
triviaData = await getTrivia();
let totalAnswers = [
...triviaData.results[0].incorrect_answers,
triviaData.results[0].correct_answer,
];
// Apparently I need 2 different arrays to sort them because array variables are stored by reference? Learn something new everyday I guess.
let totalAnswers2 = [...totalAnswers];
let sorted = shuffleArray(totalAnswers2);
// Ensures the proper symbol shows instead of the HTML entities
const doc = new DOMParser().parseFromString(
triviaData.results[0].question,
"text/html"
);
_questionHTML.textContent = doc.documentElement.textContent;
console.log(triviaData.results[0].correct_answer, "- Correct Answer");
// Appends info to the DOM
_answerOne.textContent = sorted[0];
_answerTwo.textContent = sorted[1];
_answerThree.textContent = sorted[2];
_answerFour.textContent = sorted[3];
}
btns.forEach((btn) => {
btn.addEventListener("click", (event) => {
console.log(runCount);
if (event.target.textContent === triviaData.results[0].correct_answer) {
event.target.style.backgroundColor = "#52D452";
// Disables all buttons after one has been clicked.
btns.forEach((btn) => {
btn.disabled = true;
});
setTimeout(() => {
if (runCount === 10) {
return;
}
runCount++;
correct++;
btns.forEach((btn) => {
btn.disabled = false;
});
btn.style.backgroundColor = "";
document.getElementById(
"amount-correct"
).textContent = `${correct}/10`;
appendData();
}, 2000);
} else {
event.target.style.backgroundColor = "#FF3D33";
btns.forEach((btn) => {
btn.disabled = true;
});
// document.getElementById("correct-text").textContent =
// trivia.results[0].correct_answer;
// document.getElementById("correct-answer").style.visibility =
// "visible";
setTimeout(() => {
if (runCount === 10) {
return;
}
// document.getElementById("correct-answer").style.visibility =
// "hidden";
btns.forEach((btn) => {
btn.disabled = false;
btn.style.backgroundColor = "";
});
runCount++;
appendData();
}, 3500);
}
});
});
appendData();
<div id="amount-correct"></div>
<h1 id="question"></h1>
<button id="answer-1"></button>
<button id="answer-2"></button>
<button id="answer-3"></button>
<button id="answer-4"></button>

Loop through images and set background on hover in wix velo

I'm trying to set the background image of a wix strip to change images by looping through an array when it is hovered on. I do not see any errors being thrown in the editor, however it is still not working. This is my current code.
$w.onReady(function () {
var image1 = "https://workful.com/blog/wp-content/uploads/2019/10/Women-in-Small-Business.jpg";
var image2 = "https://data.europa.eu/sites/default/files/news/2020-25-3.jpg";
var image3 = "https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fstartswithabang%2Ffiles%2F2017%2F10%2FTiny_bit_of_U.jpg";
var Background_imagez = [image1,image2,image3];
let playing = false;
let current = 0;
const run = () => {
setTimeout(() => {
$w('#columnStrip1').background.src = Background_imagez[current];
if (current < Background_imagez.length) {
current++;
} else { repeat() }
}, 500);
}
const repeat = () => {
current = 0;
run();
}
$w('#text59').onMouseIn(() => {
playing = true;
while (playing) { run() }
})
$w('#columnStrip1').onMouseOut(() => {
playing = false;
current = 0;
$w('#columnStrip1').background.src =
'https://wallpapercave.com/wp/wp2831956.png' ||
'https://images.unsplash.com/flagged/photo-1593005510329-8a4035a7238f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80'; // Default
})
});

You are using for loops incorrectly.
for loops do not return a value so you cannot assign them to a variable. You also missed out adding for prior to assigning let index = 0
for (let index = 0; index < Background_imagez.length; index++) {
$w('#columnStrip1').background.src = Background_imagez[index];
}
I am not sure if the above would actually show anything other than the last image as it will probably loop through too fast for anyone to see but it should fix your Identifier expected error.
Please refer to the documentation on for loops on MDN

Uncaught TypeError: modal.openModal is not a function

I am trying to trigger a modal popup from within an IIFE game controller module in JavaScript. The modal popup is situated in its own module and is returning the required function.
I have only recently learned about modules and so it is definitely plausible that I am missing something obvious, but after hours of staring at my code and attempting to scour the web, I am struggling to find the solution.
Below is the game controller module:
// Game Controller
const gameController = (() => {
// Create players
let player1 = PlayerFactory("Player 1", "images/player.png");
let player2 = PlayerFactory("Player 2", "images/computer.png");
// Initialise game variables
let round = 0;
let maxRounds = 8;
let turn = 0;
let player1Score = 0;
let player2Score = 0;
// Main game function
const play = function (e) {
if (round == maxRounds) {
// Increment both players' scores
player1Score++;
player2Score++;
// Display modal pop-up for tie
}
switch (turn) {
case 0:
if (player1.play(e)) {
e.target.dataset.player = 0;
round++;
turn = 1;
if (checkWinner() == 0) {
// Increment player 1 score
player1Score++;
// Display modal popup for player 1 win
modal.openModal();
}
}
break;
case 1:
if (player2.play(e)) {
e.target.dataset.player = 1;
round++;
turn = 0;
if (checkWinner() == 0) {
// Increment player 2 score
player2Score++;
// Display modal popup for player 2 win
}
}
break;
}
}
// Check winner function
const checkWinner = function () {
// Initialise winner variable
let gameWinner = '';
// For loop checking for horizontal wins
for (i=0; i<9; i=i+3) {
if (gameBoard.boardArray[i].dataset.player) {
if ((gameBoard.boardArray[i].dataset.player == gameBoard.boardArray[i+1].dataset.player) && (gameBoard.boardArray[i+1].dataset.player == gameBoard.boardArray[i+2].dataset.player)) {
gameWinner = gameBoard.boardArray[i].dataset.player;
return gameWinner;
}
}
}
// For loop checking for vertical wins
for (i=0; i<3; i++) {
if (gameBoard.boardArray[i].dataset.player) {
if ((gameBoard.boardArray[i].dataset.player == gameBoard.boardArray[i+3].dataset.player) && (gameBoard.boardArray[i+3].dataset.player == gameBoard.boardArray[i+6].dataset.player)) {
gameWinner = gameBoard.boardArray[i].dataset.player;
return gameWinner;
}
}
}
// For loop checking for diagonal wins
if (gameBoard.boardArray[0].dataset.player) {
if ((gameBoard.boardArray[0].dataset.player == gameBoard.boardArray[4].dataset.player) && (gameBoard.boardArray[4].dataset.player == gameBoard.boardArray[8].dataset.player)) {
gameWinner = gameBoard.boardArray[0].dataset.player;
return gameWinner;
}
}
// For loop checking for diagonal wins
if (gameBoard.boardArray[2].dataset.player) {
if ((gameBoard.boardArray[2].dataset.player == gameBoard.boardArray[4].dataset.player) && (gameBoard.boardArray[4].dataset.player == gameBoard.boardArray[6].dataset.player)) {
gameWinner = gameBoard.boardArray[2].dataset.player;
return gameWinner;
}
}
}
// Click event listener to call play function
window.addEventListener('DOMContentLoaded', (event) => {
let cells = document.querySelectorAll(".game-cell").forEach(cell => {
cell.addEventListener("click", play);
})
});
return {
};
})();
And here is the modal popup module:
// Modal Popup
const modal = (() => {
const modalPopup = document.querySelector(".modal");
const openModal = function () {
modalPopup.style.display = "block";
}
return {
openModal
}
})
Currently, when I trigger the modal popup with the following line (in the game controller):
// Display modal popup for player 1 win
modal.openModal();
I receive this error in the console:
Uncaught TypeError: modal.openModal is not a function
If anybody could provide some assitance here then it would be highly appreciated.
Thank you!

This is beacuse modal is a function, call it instead with parentheses, like this
modal().openModal()
It is simple to check if is or not defined
if (modal.openModal)
alert("is modal");
else
alert("isnt modal");
This will alert "isnt modal" because modal is a funcion
if (modal().openModal)
alert("is modal");
else
alert("isnt modal");
This will alert "is modal", this is correct.

Javascript Loop Not Finished before If Statement Runs

I have been stuck on this issue for some time now. I am calling an API - get the results just fine. I am saving the values to an array. The problem which I am encountering is trying to get specific values from the array. I have a for in loop running which takes time, so when the if statement is ran the loop hasn't reached that value. If I use Postman, I see that the value exists, its just the loop doesn't execute in time. Here is my code:
var msg = {};
var embed = {};
var link = {};
var msgIn = [];
var rel = [];
return SkypeService.getEvent(msg).then(function (result) {
msg.eventsNext = result._links.next.href;
if (result && result.sender && result.sender.length > 0) {
if (result.sender) {
for (var item in result.sender) {
var event = result.sender[item].events;
for (var key in event) {
embed = event[key]._embedded;
msgIn.push(embed);
}
for (var key in event) {
link = event[key].link;
rel.push(link);
}
// console.log(Object.entries(msgIn))
if(rel['rel'] == 'message') {
console.log("message is there")
if(msgIn.message) {
console.log("links exist")
if(msgIn.message.direction == "Incoming") {
console.log("direction is there")
msg.participant = msgIn.message._links.participant.href;
msg.contMsg = msgIn.message._links.messaging.href;
msg.msgIn = msgIn.message._links.plainMessage.href;
break;
}
}
}
if(rel['rel'] == "messagingInvitation"){
console.log("invite there")
if(msgIn.messagingInvitation && msgIn.messagingInvitation.state !== "Failed") {
console.log("invite link")
if(msgIn.messagingInvitation.direction == "incoming") {
console.log("direction invite")
msg.msgInviteState = msgIn.messagingInvitation._links.state;
msg.acceptInvite = msgIn.messagingInvitation._links['accept'].href;
msg.msgIn = msgIn.messagingInvitation._links.message.href;
break;
}
}
}
if(rel['rel'] == 'messaging') {
console.log('messaging there')
if(msgIn.messaging) {
if(msgIn.messaging.state == "Disconnected") {
console.log("msgn Disconnected")
msg.addMsg = msgIn.messaging._links.addMessaging.href;
break;
}
}
}
}
}
}
console.log(msg)
})
Also, I've attached a screenshot of my local host printing the msgIn which shows that the keys exists.
When I test the code running sails lift, I can see that msgIn prints a couple of times each one increasing in length. This is what makes me think the for loop has not completed by the time the if statement runs.
Please help - I really need for this to be resolved. I need to capture the links so that I can use those in the next step.
Thanks.

I have resolved my issue by making changes to the code. Here is the new version:
return
SkypeService.getEvent(msg).then(function
(result) {
msg.eventsNext = result._links.next.href;
if (result.sender) {
for (var item in result.sender) {
var event = result.sender[item].events;
for (var key in event) {
embed = event[key]._embedded;
link = event[key].link;
};
if(link['rel'] == 'message') {
console.log("message is there")
if(embed.message) {
console.log("links exist")
if(embed.message.direction == "Incoming") {
console.log("direction is there")
msg.participant = embed.message._links.participant.href;
msg.contMsg = embed.message._links.messaging.href;
msg.msgIn = embed.message._links.plainMessage.href;
break;
}
}
};
if(link['rel'] == "messagingInvitation"){
console.log("invite there")
if(embed.messagingInvitation) {
console.log("invite link")
if(embed.messagingInvitation.direction == "incoming") {
console.log("direction invite")
msg.msgInviteState = embed.messagingInvitation._links.state;
msg.acceptInvite = embed.messagingInvitation._links['accept'].href;
msg.msgIn = embed.messagingInvitation._links.message.href;
break;
}
}
};
if(link['rel'] == 'messaging') {
console.log('messaging there')
if(embed.messaging) {
if(embed.messaging.state == "Disconnected") {
console.log("msgn Disconnected")
msg.addMsg = embed.messaging._links.addMessaging.href;
break;
}
}
};
console.log(msg)
};
};
});
I have removed the result validation and simplified the for (var key in event) to handle both operations in one. Also, I have removed the arrays which I was pushing the values into as I was not using that. That may have been the time consuming factor which was preventing me from getting the direction validated.

Get rid of "PageMap asked for range which it does not have" exception

Occassionally I get the exception "PageMap asked for range which it does not have" from my Ext Js 4.2.1 infinite scrolling grid. It is raised in data/PageMap.js on line 211. Of course one should not ask for non-existing entries, but this is sometimes done by the framework itself. Seems to be somehow connected to adding/removing records or reloading the grid. There are already some threads on this topic in the Sencha forum, e.g. this, but no killer solution or bugfix was proposed yet.
Meanwhile, I have to keep this exception from the users' eyes. What would be a good way to do so? Tricky thing is that it is sometimes provoked just by the user moving the scrollbar, so there is no single line of my code directly involved.

I found the root cause to be that when it's rendering rows, it determines if it's before a selected row. If it's working on the last row, it still looks for row + 1. (Ext.view.Table:931 in 4.2.1)
My simple solution is to just make it return false:
Ext.override(Ext.selection.RowModel,
{
isRowSelected: function (record, index)
{
try
{
return this.isSelected(record);
}
catch (e)
{
return false;
}
}
});

Christoph,
I have similar troubles with "PageMap asked for range which it does not have" during asynchronuous refreshing of grids. I catched some of sources of errors in the ExtJS 4.2.1 code and created simple override, that works for me. You can try if it will work for you. I will be happy for your feedback.
Ext.override(Ext.view.Table, {
getRecord: function (node) {
node = this.getNode(node);
if (node) {
var recordIndex = node.getAttribute('data-recordIndex');
if (recordIndex) {
recordIndex = parseInt(recordIndex, 10);
if (recordIndex > -1) {
// Eliminates one of sources of "PageMap asked for range which it does not have" error
if (this.store.getCount() > 0) {
return this.store.data.getAt(recordIndex);
}
}
}
return this.dataSource.data.get(node.getAttribute('data-recordId'));
}
},
renderRow: function (record, rowIdx, out) {
var me = this,
isMetadataRecord = rowIdx === -1,
selModel = me.selModel,
rowValues = me.rowValues,
itemClasses = rowValues.itemClasses,
rowClasses = rowValues.rowClasses,
cls,
rowTpl = me.rowTpl;
rowValues.record = record;
rowValues.recordId = record.internalId;
rowValues.recordIndex = rowIdx;
rowValues.rowId = me.getRowId(record);
rowValues.itemCls = rowValues.rowCls = '';
if (!rowValues.columns) {
rowValues.columns = me.ownerCt.columnManager.getColumns();
}
itemClasses.length = rowClasses.length = 0;
if (!isMetadataRecord) {
itemClasses[0] = Ext.baseCSSPrefix + "grid-row";
if (selModel && selModel.isRowSelected) {
var storeRows = this.getStore().getCount();
// Eliminates one of sources of "PageMap asked for range which it does not have" error
if (rowIdx + 1 < storeRows) {
if (selModel.isRowSelected(rowIdx + 1)) {
itemClasses.push(me.beforeSelectedItemCls);
}
}
if (selModel.isRowSelected(record)) {
itemClasses.push(me.selectedItemCls);
}
}
if (me.stripeRows && rowIdx % 2 !== 0) {
rowClasses.push(me.altRowCls);
}
if (me.getRowClass) {
cls = me.getRowClass(record, rowIdx, null, me.dataSource);
if (cls) {
rowClasses.push(cls);
}
}
}
if (out) {
rowTpl.applyOut(rowValues, out);
} else {
return rowTpl.apply(rowValues);
}
}
});

all these codes don't work for me, after many debugging I wrote this override which solve the problem.
Ext.define('overrides.LruCache', {
override: 'Ext.util.LruCache',
// private. Only used by internal methods.
unlinkEntry: function (entry) {
// Stitch the list back up.
if (entry) {
if (this.last && this.last.key == entry.key)
this.last = entry.prev;
if (this.first && this.first.key == entry.key)
this.first = entry.next;
if (entry.next) {
entry.next.prev = entry.prev;
} else {
this.last = entry.prev;
}
if (entry.prev) {
entry.prev.next = entry.next;
} else {
this.first = entry.next;
}
entry.prev = entry.next = null;
}
}
});

This is my solution for my specific case with the same error
it somehow lost DOM element for child
this code fix that
Ext.define('override.Ext.view.Table', {
/**
* Returns the node given the passed Record, or index or node.
* #param {HTMLElement/String/Number/Ext.data.Model} nodeInfo The node or record
* #param {Boolean} [dataRow] `true` to return the data row (not the top level row if wrapped), `false`
* to return the top level row.
* #return {HTMLElement} The node or null if it wasn't found
*/
override: 'Ext.view.Table',
getNode: function (nodeInfo, dataRow) {
// if (!dataRow) dataRow = false
var fly,
result = this.callParent(arguments)
if (result && result.tagName) {
if (dataRow) {
if (!(fly = Ext.fly(result)).is(this.dataRowSelector)) {
result = fly.down(this.dataRowSelector, true)
}
} else if (dataRow === false) {
if (!(fly = Ext.fly(result)).is(this.itemSelector)) {
result = fly.up(this.itemSelector, null, true)
}
if (this.xtype == 'gridview' && !this.body.dom.querySelector(`#${result.id}`)) {
result = null
}
}
}
return result
},
})