Click handler for loop

Question

Hi evryone,
how to avoid console log from throwing uncaught typerror cannot read property '0' of undefined in this situation: I am looping through an array of element and it is working fine. I can print all element by using a clickhandler but it seems when the loop reached its end, the click handler is requesting the next value or element which does not exist. what to do in this situation ? tx

Answer 1

Provide a link to your code, or at leat post it here, but without studying it, we cannot really answer you accuratly... or by luck ^^

Anyway, you should test if the requested index is valid (in the range of the length of the array):

if (index<array.length) {
/* do what you want/need with array[index] */
}

So, by this way you're avoiding an index error to be thrown... but the "cannot read property of '0' of undefined" means that your 'array' variable is undefined (not strictly an index error): you're probably attempting to accessing an array not initialized as you want (attempt to get list elements from DOM before they exist is a common error, noticely with the tab system of code playground) or even by a spelling error or any contextual mistake... Try to verify the type of your variable, and also that it don't have a null length :P

Answer 2

I guess you initialize 'pos' with zero, so each time you click on button you increase it so you will reach the end (length value) of your 'questBank' array: the error occurs when pos == questBank.length... as this is not an initialized emplacement ^^

You can fix it by at least two ways:

+ test if values are equal, so do a conditional branchement to handle the special case at your convenience (displaying an error message, branchement to next part, disabling the event listener, resetting value of 'pos' to 0...)

+ give to your pos index a circular behaviour, using the modulo operator mathematical properties: questBank[pos%questBank.length][0] will always access a valid index

Answer 3

Thanks a gizillions Visph. I tried both suggestions. the second one is working perfectly,m
I tried the first one, which I seemed to understand better but there is probably something I am doing wrong. after many uncessful tries I tried the second one and guess what on first try it is working like charm. thanks again I will post everything soon so that you can give advice. I am a beginner. thanks

Answer 4

nextBtn.addEventListener("click", next, false);

function next() {
clearAnswer();
ResetCurr();
pos++;
render();
questLoop();

}
function questLoop() {

for (var i = 0; i < questBank.length; i++) {
gameStatus.innerHTML = "Question " + (pos + 1) + " out of " + questBank.length;
questions.innerHTML = questBank[pos][0] + "</br>" + "</br>" + "</br>" + "How much do you want to bet for this\ question? Select your Amount below!";

}

//console log error
Uncaught TypeError: Cannot read property '0' of undefined
at questLoop ()
thanks

Answer 5

here is the first draft of the game I tried to make. my very first. please your advice would be much appreciated to improve.
https://code.sololearn.com/WKdL4xUdlZ3g/?ref=app

Answer 6

it s a rather lengthy code which I am writing on desktop but this is the part dealing with the issue at the end of the loop if I continue clicking on the button with the clickhandler attached it throws the error and underlines from [0].......Amount below!