Hi friends, I don't know why this javascript codes never work

Hi friends, I create a registration poage and add javascript codes to it (in a function and seperate file). After typing all the neccesary codes, I tried it and found out its not working no matter how much I tried. And this are the codes below.

This is the register.html page.

        <!doctype html>
<html lang = "eng">
<head>
<title>Registration page</title>
<meta name="" content="">
</head>
<body>
<form action = "#" method="get" id="theForm">
	<fieldset><legend>Registration page</legend><p>Please provide all the neccessary information</p>
	<div class="one"><label for="firstname">FirstName<span class="tooltip">Provide your first name</span></label><input type = "text" name="first_name" id="firstName" value="" placeholder="Firstname here"/></div>
	<div class="one"><label for="lastname">LastName</label><input type = "text" name = "last_name" id="lastName" value = "" placeholder="Lastname here"/></div>
	<div class="one"><label for="username">Username</label><input type = "text" name = "username" id="username" value="" placeholder="Username here"/></div>
	<div class="one"><label for = "password">Password</label><input type = "password" name = "password" id="password" value="" placeholder="Your password"/></div>
	<div class="one"><label for = "state">State</label><select name = "Choose a state " id="state">
		<option value="og">Ogun</option>
		<option value = "la">Lagos</option>
		<option value = "os">Osun</option>
		<option value="ek">Ekiti</option>
		<option value ="on">Ondo</option>
		<option value="oy">Oyo</option>
	</select></div>
	<div class = "two"><label>Hobbies</label> <input type="checkbox" name="toggle" id="toggle" value="toggle"> All/None
	<p><input type="checkbox" name = "hobbies[]" id = "football" value="football"/>Football
	<input type="checkbox" name = "hobbies[]" id = "basketball" value="basketball"/>Basketball
	<input type="checkbox" name = "hobbies[]" id = "tennis" value="tennis"/>Tennis
	<input type="checkbox" name = "hobbies[]" id = "atletics" value="atletics"/>Atletics</p></div>
	<div class = "one"><input  type =  "submit" name="submit" value="Register" id="submit"/></div>
	</fieldset>
</form>
<script src="js/utilities.js"></script>
<script src="js/errormessages.js"></script>
<script src="js/registration.js"></script>
</body>
</html>

While the next page is called UTILITIES.JS(written in OOP).

        var U = {
	$: function(id){
		'use strict';
		if(typeof id == 'string'){
			return document.getElementById(id);
		}
	},
	
	setText: function(id, message){
		'use strict';
		if((typeof id == 'string') && (typeof message == 'string')){
			var output = this.$(id);
			if !(output) return false;
			
			if(output.textContent !=='undefined'){
				output.textContent = message;
			}else{
				output.innerText = message;
			}
			return true;
		}
		
	}, 
	
	addEvent: function(obj, type, fn){
		'use strict';
		if(obj && obj.addEventListener){
			obj.addEventListener(type, fn, false);
		}else if(obj && obj.attachEvent){
			obj.attachEvent('on'+type, fn);
		}
	},
	
	removeEvent: function(obj, type, fn){
		'use strict';
		if(obj && obj.removeEventlistener){
			obj.removeEventlistener(type, fn, false);
		}else if(0bj && obj.detachEvent){
			obj.detachEvent('on'+type, fn);
		}
	},
	
	enableTooltips: function(id){
		'use strict';
		var elem =  this.$(id);
		
		this.addEvent(elem, 'focus', this.showTooltips);
		this.addEvent(elem, 'mouseover', this.showTooltips);
		this.addEvent(elem, 'blur', this.hideTooltips);
		this.addEvent(elem, 'mouseout', this.hideTooltips);
	},
	
	showTooltip: function(e){
		'use strict';
		if(typeof e == 'undefined') var e = window.event;
		var target = e.target || e.srcElement;
		target.previousSibling.lastChild.style.visibility = 'visible';
			
	},
	
	hideTooltip: function(e){
		'use strict';
		if(typeof e == 'undefined') var e = window.event;
		var target = e.target || e.srcElement;
		target.previousSibling.lastChild.style.visibility = 'hidden';
	}
	
	//toggle checkboxex function
	function toggleCheckBoxes(){
		'use strict';
		// Get the master checkbox's value:
	var status = this.$('toggle').checked;
	
	// Get all the checkboxes:
	var boxes = document.querySelectorAll('input[type="checkbox"]');
	
	// Loop through the checkboxes, starting with the second:
	for (var i = 1, count = boxes.length; i < count; i++) {
		
		// Update the checked property:
		boxes[i].checked = status;
		
	} // End of FOR loop.
	}	

};

The next page is called ERRORMESSAGES.JS.

        function addErrorMessage(id, msg){
	'use strict';	
	var elem = document.getElementById(id);
	
	var newId = id + 'Error';
	//check for the existence of the span.
	var span =  document.getElementById(newId);
	if(span){
		span.firstChild.value = msg;
	}else{//create new
		//create the span
		span = document.createElement('span');
		span.id = newId;
		span.className =  'error'
		span.appendChild(document.createTextNode(msg));
		
		//add the span to tbe parent
		elem.parentNode.appendChild(span);
		elem.previousSibling.className = 'error';
	}//end of if statement
}//end of addErrormessage

function removeErrorMessage(id){
	'use strict';
	var span = document.getElementById(id + 'Error');
	if(span){
		span.previousSibling.previousSibling.className = null;
		span.parentNode.removeChild(span);
		
	}//end of if
}//end of removeErrormessage

The last page is called REGISTRATION.JS

        function validateForm(e){
	'use strict'
	//get the event Object
	if(typeof e == 'undefined') e = window.event;
	
	//get form references
	
	var firstName = U.$('firstName');
	var lastName = U.$('lastName');
	var username = U.$('username');
	var password = U.$('password');
	var state =  U.$('state');
	var hobbies = U.$('toggle').checked;
	/*var boxes = document.querySelectorAll('input[type="checkcox"]');
	for(vari =1, count = boxes.length; i <count; i++){
		boxes[i].checked = status;
		
	}*/
	var error = false;
	
	if (/^[A-Z \.\-']{2,20}$/i.test(firstName.value)){
		removeErrorMessage('firstName');
	}else{
		addErrorMessage('firstName', 'Please enter your first name.');
		error = true;
	}//end of firstName statement
	
	if (/^[A-Z \.\-']{2,20}$/i.test(lastName.value)){
		removeErrorMessage('lastName');
	}else{
		addErrorMessage('lastName', 'Please enter your last name.');
		error = true;
	}//end of lastname statement
	
	if (/^[A-Z \.\-']{2,20}$/i.test(userame.value)){
		removeErrorMessage('username');
	}else{
		addErrorMessage('username', 'Please enter your username.');
		error = true;
	}//end of username statemet
	
	if (/^[A-Z \.\-']{2,20}$/i.test(password.value)){
		removeErrorMessage('password');
	}else{
		addErrorMessage('password', 'Please enter your password.');
		error = true;
	}//end of password statement
	
	if(state.selectedIndex !=0){
		removeErrorMessage('state');
	}else{
		addErrormessage('state', 'you must choose a south-west state you live');
		error = true;
	}//end of state choose statement
	
	//if an error occured, prevent the default browser from performing
	if(error){
		if(e.preventDefault){
			e.preventDefault();
		}else{
			e.returnValue = false''
		}//end of prevent default
		return false;
	}//end of if error
	
	
}//end of validateForm


window.onload = function(){
	'use strict';
	U.addEvent(U.$('theForm'), 'submit', validateForm);
	
	//disable the submit button to start
	U.$('submit').disabled = true;
	
	//Enable toolTip on firstName
	U.enableTooltips('firstName');
	//get the check boxex working
	U.$('toggle').onchange = toggleCheckboxes;
	};

I would be happy if you couldc help me out with it fellow programmers

Please, who can explain to me better how to use the symbols as it seems I don’t really get the uses of the sysbol above(the sitepoint symbols)

Just highlight your code and click the </> button.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.