Javascript Reference Error

[iwato]

BACKGROUND:  I have a page that, when loaded,  creates several values via PHP.  These values are assigned to several Javascript variables on the same page. I have verified that the assignment succeeds. 

When a visitor clicks on the page a visible div on the page is filled with the content of another div on the same page page, and additional javascript and CSS are loaded from another  document.  I have verified that this latter load does succeed, and that at least one of the functions contained therein is accessible. 

DILEMMA: Unfortunately, this freshly loaded Javascript is unable to find the values of the Javascript variables to which the PHP values were assigned when the page was initially downloaded.

QUESTION ONE:  What are the plausible reasons for not being able to find the relevant variables?

QUESTION TWO:  How do I make them findable?

Roddy 

Edited August 28, 2019 by iwato
Bad grammar!

[justsomeguy]

The general reason is that the variables are out of scope or undefined when the code runs.  The specific reason depends on the specific code.

[iwato]

Yes, it is likely a problem of scope, because I can get it to work, if I generate the variable after the additional script has loaded.  I need, however, to have the value already in place and available, before the additional code is run.  Is there someplace that I can store it to make it available at any time?

Roddy

[justsomeguy]

The global scope is always available if that's what you're asking about.  If it's a question of timing instead of scope then whatever code sets the value should then execute the function that uses it.  Or, maybe some flag that says whether or not the values are loaded and if the function that uses those values sees that they're not loaded then it runs whatever code loads the values before trying to use them.

This is all pretty abstract though.

[iwato]

OK.  I have uploaded the problem to the internet.  Please proceed as follows to discover the source of the problem.

STEP ONE:  Open to the Grammar Captive mainpage.

STEP TWO:  Find the heading Local Search in the navigation bar and click on the menu option Newsletter.

STEP THREE:  Find the Captcha fieldset and click on the Reset Button .

STEP FOUR:  Play to your heart's content.  Everything is, at minimum, functional.

STEP FOUR:  Repeat STEPS ONE and TWO.

STEP FIVE:  Skip STEP THREE and proceed to STEP FOUR.  This is where the problem arises.  It is because the  condition of the if-statement in the following code fails.  The value of captcha_sa is returned undefined.

	function submitForm(confirmCode, event) {
		var visitorConfirmation = confirmCode;
		console.log('visitorConfirmation: ' + visitorConfirmation);

		if (visitorConfirmation == captcha_sa) {

			var search_letter_input = $("input#letter_input").val();
			if (search_letter_input == "") {
// 				$("#letter_input_error").show().append('<br />');
				var inputError = $("#letter_input_error").html();
				$(".MissingEntry").css('display', 'block');
				$('.CaptchaSuccess').css('display', 'none');
				$('.CaptchaError').css('display', 'none');		
				$('.CaptchaInstruction').css('display', 'none');		
				$("#letter_input").focus().focusout(function() {
					$("#letter_input_error").hide();
				});					
			} else {
				$('.CaptchaSuccess').css('display', 'block');
				$('.CaptchaError').css('display', 'none');		
				$('.CaptchaInstruction').css('display', 'none');		
				$(".MissingEntry").css('display', 'none');
				event.preventDefault();
				findAndDisplay_letter(search_letter_input);
			}
			$('.CaptchaError').css('display', 'none');		
			$('.CaptchaInstruction').css('display', 'none');		
			event.preventDefault();
			findAndDisplay_letter(search_letter_input);
		} else {
			$('.CaptchaError').css('display', 'block');		
			$('.CaptchaSuccess').css('display', 'none');
			$('.CaptchaInstruction').css('display', 'none');		
			event.preventDefault();
			findAndDisplay_letter(search_letter_input);
		}
	}

SOURCE:  https://www.grammarcaptive.com/_utilities/javascript/search_letter.js

Roddy

Edited August 29, 2019 by iwato
Added Link

[justsomeguy]

Are you saying you don't set the value unless the reset button is pressed?  It seems like the reset button should just repeat the exact same action that set it up in the first place, why is it doing something different?  What's the difference between initially setting up the form and resetting it?

[iwato]

11 minutes ago, justsomeguy said:

Are you saying you don't set the value unless the reset button is pressed?

Yes.

Quote

What's the difference between initially setting up the form and resetting it?

The reset button sets the captcha question and answer after the search div has been already loaded.  The original question and answer are determined when the page is loaded.  The functionality is similar, but the activation is different. 

The reset button uses AJAX to trigger the generation of the question and answer.  The initial setting does not.  This latter is generated with PHP built into the main page.

Roddy

Edited August 29, 2019 by iwato

[justsomeguy]

I guess I don't understand why you're not setting the value initially, I don't understand what the barrier to doing that is.  How about just calling the reset function when the thing loads?  That's what I'm talking about for the reset button doing the same thing as when it initially loads.

[iwato]

"BACKGROUND:  I have a page that, when loaded,  creates several values via PHP.  These values are assigned to several Javascript variables on the same page. I have verified that the assignment succeeds.  

When a visitor clicks on the page a visible div on the page is filled with the content of another div on the same page page, and additional javascript and CSS are loaded from another  document."  

Roddy

Edited August 29, 2019 by iwato

[iwato]

Your suggestion about invoking the reset function when the div is loaded works, but it also seems to render a lot of the rest of what I did worthless. Now, I have to figure out what to eliminate.

Roddy