JavaScript - Error Message - What's Wrong?

<form name="te" onsubmit='login();' action='login.php' method='post'>
         <input name='username' maxlength='14' value='Username' type='text' />
          <input name='password' maxlength='20' value='Password' type='password' />
          <input type="submit" name="login" value="Login" />
</form>

<script type="text/javascript">
function login() {
	var username = document.te.username.value;
	var password = document.te.password.value;
	
	if (username == 'Username' || username == '') {
		alert('empty username!');
		return false;
	}
	else {
		if (password == 'Password' || password == '') {
                                       alert('empty pass');
                                       return false;
		}
	}
             return true;
}
</script>

Message: 'document.getElementById(...)' is null or not an object

<a href="http://www.samplesite.com" id="sampleid">Sample Text</a>

function samplefct() {
window.open(this.href);return false;
}

window.onload = function()
{document.getElementById("sampleid").onclick = samplefct;
}

 if(proceed) {
	      $.ajax({
		  	type: "POST",
		  	data: "key="+id,
		  	dataType: 'json',
		  	async: true,
		  	url: "<?php echo site_url(); ?>/server/view_serverdet/",
		  	beforeSend: function() {
	        	$('#view_load'+id).show();
	        	$('#view_load'+id).addClass(class);
	  		},
	        complete: function(){
                      	
	        		$('#view_load'+id).hide();
	        	}
	        },
		  	success: function (server_msg) {
		  		if (null == server_msg) {
		  			var warning = "<font color=\"red\">Unable to load server details</font>";
                	$('#view_load'+id).html(warning);
				} else {
					
                       // Working Fine!
                               }

function compareChar(startString, altString, nomChar)
{
var outputString = '';
outputString.length = startString.length;
var nextLetter = '';
		
for (var count = 0; count < startString.length; count = count + 1)
{
nextLetter = startString.charAt(count);
			
if  (nextLetter == nomChar)
{
outputString.charAt(count) = nextLetter;
}
else
{
outputString.charAt(count) = altString.charAt(count);
}			
}
}

document.write(compareChar('boston',  'denver' , 'o' )  );

outputString.charAt(count) = nextLetter;

var Dropdown = function(el) {
 
    this.el = el;
 
    this.handle = el.find("div.dropdown-text");
    this.options = el.find("div.dropdown-options");
    this.optionsWrap = this.options.parent();
    this.action = el.attr("action");
    this.type = el.attr("type");
    this.target = el.attr("target");
 
    this.Init();
}
 
Dropdown.prototype.Init = function() {
    var self = this;
 
    var extraPadding = 40;
 
    this.isShown = false;
 
    console.log(this);
 
    this.width = this.options.outerWidth() + extraPadding;
    this.height = this.options.outerHeight();
 
    if (this.height > 300) {
        this.height = 300;
        this.options
                  .height(300)
                  .width(this.width + 12)
                  .addClass("scroll-pane")
                  .jScrollPane({
                      showArrows: true,
                      scrollbarWidth: 9
                  })
        this.width += 12;
 
    } else {
        this.options.width(this.options.width() + extraPadding);
 
    }
 
    var newWidth = (this.width < 220) ? this.width : 220;
 
    this.el.width(newWidth);
 
    this._AddShadow();
 
    this.optionsWrap.css({
        display: "none",
        visibility: "visible",
        width: this.width + 5,
        height: this.height + 5
    });
 
    this._SetEvents();
};
 
Dropdown.prototype.Toggle = function(force) {
     
      if (this.isShown && !force) {
            this.optionsWrap.hide();
            this.isShown = false;
           
      } else if (!this.isShown && false !== force){
            this.optionsWrap.show();
            this.isShown = true;
      }    
}
 
Dropdown.prototype._AddShadow = function() {         
      var shadowWidth = 5, layer;
     
    for (var i = 0; i < shadowWidth; i++) {
        layer = $('<div class="shadow_layer">&nbsp;</div>');
      
        layer.css({
            opacity: 0.055 * (i + 1),
            top: (shadowWidth - i),
            left: (shadowWidth - i),
            height: this.height,
            width: this.width
        });
       
        this.optionsWrap.prepend(layer);
    }
}
 
Dropdown.prototype._SetEvents = function() {
    var self = this;
 
    this.el.bind('click', function(e) {
        var current = $(e.target);
        var type = current.attr("type");
 
        if (current.hasClass('dropdown-text') || current.hasClass('dropdown-arrow')) {
 
            if (!self.isShown) {
                page.HideAllDropdowns();
            }
 
            self.Toggle();
            return false;
        }
 
        if (current.hasClass('dropdown-opt')) {
            switch (type) {
                case 'auto': case 'basic':
                    var html = current.html();
                    self.handle.html(html);
 
                    self.options.find('a.dropdown-opt').each(function() {
                        $(this).removeClass('selected');
                    });
 
                    if ('auto' == type) {
                        page.common.Update({
                            url: current.attr('path'),
                            params: current.attr('params'),
                            target: self.target,
                            parent: true,
                            method: "POST",
                            handler: {
                                handler: function(results) {
                                    var action = this.attr("action");
                                    if (action) { page.events.Fire(action, this, results) };
                                },
                                context: current
                            }
                        });
                    }
 
                    current.addClass('selected');
                    self.Toggle();
                    return false;
 
                case 'multi':
                    current.toggleClass('selected');
                    break;
 
                case 'function':
                    var html = current.html();
                    self.handle.html(html);
 
                    current.Fire();
                    self.Toggle(false);
                    break
            }
        }
 
        return false;
    });
 
}

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Intranet GIS Service</TITLE>
<HTML>
<HEAD>
	<SCRIPT LANGUAGE="JavaScript" SRC="javascript/aimsResource.js" TYPE="text/javascript"></SCRIPT>
	<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">	
		
		// Designer will set the next variable - theTitle
		//var theTitle = "Intranet GIS";
		var theTitle = "";
		if (theTitle.indexOf("###TITLE##")!=-1) theTitle = titleList[0];
		var cmdString = document.location.search;

		var webParams = cmdString;
		var reloadTimer=0;
		document.writeln("<TITLE>" + theTitle + "</TITLE>");
		
		function doIt() 
		{
			MapFrame.useJava=false;
			MapFrame.checkParams();
		}
		function replacePlus(inText) 
		{
		     var re = /\+/g;
		      inText = inText.replace(re," ");
		     return inText;
		}
		
		function reloadApp() 
		{
			//window.clearTimeout(reloadTimer);
			//reloadTimer = window.setTimeout("document.location.href = 'viewer.jsp' + cmdString",1000);
			
			//Above code replaced with this. Only the map should refresh after a resize, otherwise
			//all added datashare layers are lost.

			MapFrame.mWidth = MapFrame.getMapWidth();
			MapFrame.mHeight = MapFrame.getMapHeight();
			MapFrame.sWidth = screen.width;
			MapFrame.sHeight = screen.height;
			MapFrame.loadBannerLeft = parseInt((MapFrame.mWidth - 119)/2);
			MapFrame.loadBannerTop = parseInt((MapFrame.mHeight - 72)/2);
			MapFrame.document.getElementById("theMap").style.width = MapFrame.sWidth;
			MapFrame.document.getElementById("theMap").style.height = MapFrame.sWidth;
			
			MapFrame.iWidth = MapFrame.mWidth;
			MapFrame.iHeight = MapFrame.mHeight;
			
			MapFrame.legHeight = MapFrame.iHeight - 160;
						
			var cmd = 'MapFrame.sendMapXML();';
			cmd += 'MapFrame.document.getElementById("theImage").style.width = MapFrame.mWidth;';
			cmd += 'MapFrame.document.getElementById("theImage").style.height = MapFrame.mHeight;';
			
			window.clearTimeout(reloadTimer);
			reloadTimer = window.setTimeout(cmd,1000);
		}	
	
	</SCRIPT>
</HEAD>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
	var browser = navigator.appName;
	var moreStuff = 'onresize="reloadApp()"';
	var addNS = 0;
	if (browser=="Netscape") 
	{
		addNS = 3;
	}
	document.writeln('<FRAMESET ROWS="' + (45+addNS) + ',*,30,0" FRAMEBORDER="No" FRAMESPACING="0" onload="doIt()" BORDER=2 ' + moreStuff + '>');
	document.writeln('<FRAME NAME="TopFrame" SRC="topbar.htm" MARGINWIDTH="5" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No" NORESIZE>');
	document.writeln('<FRAMESET COLS="' + (30+addNS) + ',*,270" FRAMEBORDER="No" FRAMESPACING="0" BORDER="2">');
	
</SCRIPT>
		<FRAME NAME="TextFrame" SRC="text.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No" NORESIZE FRAMESPACING="0" BORDER="2">
		
		<!-- If textframe is used-->
		<FRAMESET ROWS="*,115">	
			<FRAME NAME="MapFrame" SRC="MapFrame.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="Yes" RESIZE="YES">
			<FRAME NAME="ToolFrame" SRC="blank.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="Auto" FRAMEBORDER="No" RESIZE="YES">
		</FRAMESET> 
		 
		<!-- If textframe is not used -->
		<!--<FRAME NAME="MapFrame" SRC="MapFrame.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No" RESIZE="YES">-->
		
		<FRAME NAME="TOCFrame" SRC="TOCFrame.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="Auto" FRAMEBORDER="No" RESIZE="YES">
	</FRAMESET>
	<FRAMESET COLS="400,*" FRAMEBORDER="Yes" BORDER=2 FRAMESPACING="0">
		<FRAME NAME="ModeFrame" SRC="bottom.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No" NORESIZE>
		<FRAME NAME="ModeFrame" SRC="bottom.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No" NORESIZE>
	</FRAMESET>
	<FRAME NAME="PostFrame" SRC="jsForm.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="No" NORESIZE FRAMESPACING="0" BORDER="2">
</FRAMESET>

<NOFRAMES>
<BODY>
<P>
</BODY>
</NOFRAMES>
</HTML>

<script type="JavaScript">


function showMessage()
{
    var d = new Date();
    var day = d.getDay();     // Note: Sunday=0, Monday=1, etc...

    switch( true )
   
        }
        case ( day == 6 ) :
        {
          document.write("Today is saturday!")
        }
         case ( day == 5 ) :
        {
          document.write("Today is friday!")
        }
         case ( day == 4 ) :
        {
          document.write("Today is thursday!")
        }
         case ( day == 3 ) :
        {
          document.write("Today is wednesday!")
        }
         case ( day == 2 ) :
        {
          document.write("Today is tuesday!")
        }
         case ( day == 1 ) :
        {
          document.write("Today is monday!")
        }
         case ( day == 0 ) :
        {
          document.write("Today is sunday!")
        }
    }    
}

    </script>

function addOption()
        {   
            var newItem = prompt("Enter New Item");  
            
            if (!newItem == "")
            {
                var answer = confirm ("Are you sure you want to add? ") 
                if (answer)//if answer is true
                {
                    var lstBx = document.getElementById("lstBxEmail");
                      
                    // Now we need to create a new 'option' tag to add to MyListbox 
                    var newOption = document.createElement("option"); 

                    newOption.value = newItem; // The value that this option will have 
                    newOption.innerHTML = newItem; // The displayed text inside of the <option> tags
                       
                    // Finally, add the new option to the listbox 
                    lstBx.appendChild(newOption);             
                    //sort items in listbox in alpha order
                    arrTexts = new Array();

                    for(i=0; i<lstBx.length; i++) 
                    {
                        arrTexts[i] = lstBx.options[i].text;
                    }
                       
                    arrTexts.sort();
                    for(i=0; i<lstBx.length; i++)
                    {
                        lstBx.options[i].text = arrTexts[i];
                        lstBx.options[i].value = arrTexts[i];
                    }                     
                }
                                
                else
                {    
                    if(newItem)
                    {
                        alert("Key something to textbox please.");
                    }
                    
                    else
                        alert("Cancel choice.");
                }                    
            }
        }

                                <center><input id="Submit18" type="submit" value="Add Address" onclick="addOption()"/>

                                
                            <div>Address:</div>
                                <center>
                                <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;">
                                      <option>Java</option>
                                      <option>PHP</option>
                                      <option>Perl</option>
                                      <option>Javascript</option>
                                      <option>C#</option>
                                      <option>Powershell</option>                                      
                                    </select>                              
                                </center>

<form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">

* First Name: <input type="text"  name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />



* Password: <input type="password" id="pw" name="Password" onblur="checkpw();" id="pw"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />


I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />



I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />



My favorite element is:
	<select name="element" id="element">
                <option value="">select one</option>
		<option value="fire">Fire</option>
		<option value="earth">Earth</option>
		<option value="water">Water</option>
		<option value="air">Air</option>
	</select><br />



*Birthday: <input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br />



*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />


	<input type="submit" value="Submit" />
	<input type="reset" value="Clear" />

</form>

function isFormValid() 
{var userF = document.getElementById('FName').value;
	var userL = document.getElementById('LName').value;
	var userPW = document.getElementById('pw').value;
	var userPW2 = document.getElementById('pw2').value;
	var userBDay = document.getElementById('BDay').value;
	var userEmail = document.getElementById('email').value;
	var NameFormat = /^[A-Za-z]{2,12}$/;
	var PWFormat = /^[A-Za-z0-9{6,12}$]/;
	
	if (!NameFormat.test(userF))
		{
		alert("First Name is required and should only have letters. 2-12 letters max");
		return false;
		}
	if (!NameFormat.test(userL))
		{
		alert("Last Name is required and should only have letters. 2-12 letters max");
		return false;  
		}
	if (!PWFormat.test(userPW))
		{
		alert("Password is required and should only have letters and numbers. 6-12 letters max");
		return false; 
		}
	if (userPW != userPW2)
		{
		alert("Passwords do not match.");
		return false;
		}
	
}
                       
function checkFName()
{
	var userF = document.getElementById('FName').value;
	var elementF = document.getElementById('labelFName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userF))
		{
		elementF.innerHTML = "First Name is required and should only have letters. 2-12 letters max";
		elementF.style.color = "red";
		}
	else
		{
		elementF.innerHTML = "";
		elementF.style.color = "green"; 
		}
}

function checkLName()
{
	var userL = document.getElementById('LName').value;
	var elementL = document.getElementById('labelLName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userL))
		{
		elementL.innerHTML = "Last Name is required and should only have letters. 2-12 letters max";
		elementL.style.color = "red";
		}
	else
		{
		elementL.innerHTML = "";
		elementL.style.color = "green"; 
		}
}
function checkpw()
{
	var userPW = document.getElementById('pw').value;
	var elementPW = document.getElementById('labelpw');
	var PWFormat = /^[A-z0-9]{6,12}$/;
	if (!PWFormat.test(userPW))
		{
		elementPW.innerHTML = "Password is required and should only have letters and numbers. 6-12 letters max";
		elementPW.style.color = "red";
		}
	else
		{
		elementPW.innerHTML = "Valid Password";
		elementPW.style.color = "green"; 
		}
}
function checkpw2()
{
	var userPW2 = document.getElementById('pw2').value;
	var userPW = document.getElementById('pw').value;
	var elementPW2 = document.getElementById('labelpw2');
	if (userPW != userPW2)
		{
		elementPW2.innerHTML = "Passwords do not match.";
		elementPW2.style.color = "red";
		}
	else
		{
		elementPW2.innerHTML = "Passwords Match";
		elementPW2.style.color = "green"; 
		}
}