Why isn't this subfunction working?

I want to take the 3 lines that are commented out // below, and use the function ShowErrMessage, but ShowErrMessage is not working. What am I doing wrong?

function ShowErrMessage() {
    divID.innerHTML = emessage;
    divID.style.display = "block";
     divID.scrollIntoView();
}



function CheckSystemName(){
     var divID = document.getElementById("nameError");
     if (NewProductForm.SystemName.value == "")  {
     var emessage = "Please enter the Name of your  product:";
    ShowErrMessage();
//    divID.innerHTML = emessage;
//    divID.style.display = "block";
//     divID.scrollIntoView();
    theForm.SystemName.focus();
    flag=1;
    }  else {
        divID.style.display = "none";

    }

Code (markup):

 

The ShowErrMessage-function isn't working, since it doesn't have anything to show. You can't pass variables to and from a function - you need to assign it.
If you want the ShowErrMessage() to output, you need to actually have a set value in emessage - hence, do something like this:
function ShowErrMessage(emessage) {} and then try again.

 

To better explain what PoPSiCle is saying, you are declaring divID and emessage inside CheckSystemName -- this makes them "local" to that function, meaning they do not exist outside that function... as such they are undefined when you try to call them from a function external to CheckSystemName. There are THREE ways to address this.

Method 1: make them global.

var
	divID, emessage;

function ShowErrMessage() {
	divID.innerHTML = emessage;
	divID.style.display = "block";
	divID.scrollIntoView();
}
 
function CheckSystemName(){
	divID = document.getElementById("nameError");
	if (NewProductForm.SystemName.value == "")  {
	emessage = "Please enter the Name of your  product:";
	ShowErrMessage();
... blah blah blah

Code (markup):

Drawback? They're now global, so other scripts could interfere in their use.

Method 2: put the called function inside the parent function:

function CheckSystemName(){
	function ShowErrMessage() {
		divID.innerHTML = emessage;
		divID.style.display = "block";
		divID.scrollIntoView();
	}
	var
		divID = document.getElementById("nameError"),
		emessage = "Please enter the Name of your  product:";
	if (NewProductForm.SystemName.value == "")  {
		ShowErrMessage();
... blah blah blah

Code (markup):

Drawback? If you wanted to use that function from other functions, it doesn't exist.

Method 3: Pass them as parameters

function ShowErrMessage(divID, emessage) {
	divID.innerHTML = emessage;
	divID.style.display = "block";
	divID.scrollIntoView();
}
 
function CheckSystemName(){
	var
		divID = document.getElementById("nameError"),
		emessage = "Please enter the Name of your  product:";
	if (NewProductForm.SystemName.value == "")  {
		ShowErrMessage(divID, emessage);
... blah blah blah

Code (markup):

Drawback? Higher stack use and a wee bit slower...

Usually you're best off with method 3... THOUGH... I wouldn't waste time even making the emessage variable in the local scope. Something like:

function ShowErrMessage(div, message) {
	div.innerHTML = message;
	div.style.display = 'block';
	div.scrollIntoView();
}
 
function CheckSystemName(){
	var divID = document.getElementById('nameError');
	if (NewProductForm.SystemName.value == '')  {
		ShowErrMessage(divID, 'Please enter the Name of your  product:');
    theForm.SystemName.focus();
    flag=1;
	} else divID.style.display = "none";

Code (markup):

Though if this is something like a form error, usually I'd be deleting / adding the element to the DOM instead of swapping it's display state.

 

This works. Thanks!