Need some help. My code reports errors, which IMHO are none. Preview/Output clearing itself after function finishes.

Question

Hi everyone!

I could need some help with validating my code.
Because of the flood of errors I have rewritten the code.
First of all, I have renamed all variables to self-explanatory names with camelCase.
Then I've set initial values to all declared variables and created a function to initialize the global variables.
Commented out all console.log() arguments which I used to debug the code.
Put the code in various online validators to double check bugs and errors.
Opened the code in different browsers and window modes (normal and private).

And still it doesn't work as expected.
Well, I think it's time for some other pair of eyes to take a closer look.

Following issues so far:
1. console keeps clearing itself after user clicks on cancel
2. HTML content which was generated and created with .innerHTML method flushes after all functions finish
3. Several "undefined" variables and functions which should have some values
e.g. line 118 reports undefined

Many thanks

https://code.sololearn.com/WU76YPfY4HOA/?ref=app

Answer 1

@ODLNT:
"Another alternative is to move the button element outside of the form."

- Done. Works. Thanks.

About the "undefined" thing:

A lot of Google research, inspecting the code and studying the console log again and again and again and ... yeah ... I finaly got it!

So here is what was causing the problem:

[HTML]
...
<input type="checkbox" ... onchange="clearTable()" checked>
...

[JS]
...
function clearTable() {
...
PASSWORD_LIST = 0;
}
...

And here we go! "PASSWORD_LIST = 0" changes the data type from Array (Object) to Number.
I put some more console logging:

console.log("typeof(PASSWORD_LIST)="+typeof(PASSWORD_LIST));

what gave me the output "number". At this point I realized what was going on (well, actually after a little more research): The Array was 'converted' to a number and therefore the assigning by index wasn't working after all.
You did not see that one coming, did ya?

So simple, but yet so powerfull.

The fact that JS variables can have dynamic Data Types can be really painful sometimes.

____________________
EDIT:

I cleaned up the code a little bit and it seems to work now, but the SoloLearn Code Playground Editor displays: "Too many errors. 88% scanned."

Why? Any ideas?

Answer 2

Pete

Put event.preventDefault() inside of the function validatePassword(). This will stop the flushing and the clearing.
I'm not sure but it appears that the validate password button is trying to submit the form data to the form-handler and in this case, it is the current(default) page. Another alternative is to move the button element outside of the form.
https://www.w3schools.com/html/html_forms.asp

The undefined problem is due to PASSWORD_LIST[PASSWORD_LIST.length]should be
PASSWORD_LIST[PASSWORD_LIST.length-1] as you already know.