JavaScript - Key Listeners Forgotten Feature

Hey, im having another problem with my JavaScript. I wanted to call 2 functions inline, but I can't seem to do it. So I have added the function (add_event_listeners) to the function (load_doc) that is usually called.

JavaScript debugger is saying: Code:

Uncaught TypeError: Cannot read property 'addEventListener' of null

JavaScript:
PHP Code:
//Get httpobject
function getHTTPObject() {
    var http = false;
    if (window.XMLHttpRequest) { 
        http = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return http;
}
//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
    if ( elm.addEventListener ) {
        elm.addEventListener( evt, fun, false );
    } else if ( elm.attachEvent ) {
        elm.attachEvent( 'on' + evt, fun );
    } else {
        elm [ 'on' + evt ] = fun;
    }
};

function load_doc(doc, parent) {
    add_event_listeners();
    document.getElementById(parent).innerHTML = "Fetching data...";
    var http = getHTTPObject();
    if (http != undefined) {
        http.onreadystatechange = function() { req_doc(doc, parent, http); };
        http.open("GET", doc, true);
        http.send("");    
    }
}
function req_doc(doc, parent, req) {
    if (req.readyState == 4) {//only if req is loaded
        if (req.status == 200) {//And if its okay
            document.getElementById(parent).innerHTML = req.responseText;
        } else {
            document.getElementById(parent).innerHTML = "Error fetching data: " + req.status + "\n" + req.statusText;
        }
    }
}

//Script used to hide elements. Usage: expand(element id)
function expand(elm) {
    var ex = document.getElementById(elm).style.display;
    if (ex == "none") {
        var obj = document.getElementById(elm);
        obj.style.display = "inline";
    } else if (ex == "inline") {
        var obj = document.getElementById(elm);
        obj.style.display = "none";
    }
}
function add_event_listeners() {
    addEvent(document.getElementById('username'), "click", check_database);
    addEvent(document.getElementById('email'), "click", check_database);
    addEvent(document.getElementById('password_2'), "blur", check_password);
}
var check_database = function() { check_database_existing(this); };
var check_password = function() { compare_fields(this); };

function check_database_existing(obj) {
    
}
function compare_fields(obj) {
    var field2 = obj.id.split("_");
    field2 = document.getElementById(field2[0]).value;
    if (obj.value == field2) { 
        if (obj.value.length >= 4) {
            document.getElementById("pass_status").style.color = "#00CC00";
            document.getElementById("pass_status").innerHTML = "OK!";
        } else {
            document.getElementById("pass_status").innerHTML = "Please must be between 5 - 14 characters long! ";
            document.getElementById("pass_status").style.color = "#FF0000";
        }
    } else {
        document.getElementById("pass_status").innerHTML = "Passwords do not match!";
        document.getElementById("pass_status").style.color = "#FF0000";    
    }
} 


HTML:
Code:

<div style="border-color:#090; border-width:1px; border-style:solid;">
<div class="login_button register_button" onClick="load_doc('pages/forms/login_form.php', 'login_form')">Back to login</div>
<h1>Register</h1>
    <h3>DrawSomething - WordGuesser</h3>
    <br />
	<form id="register" action="php/register.php" method="post">
		Username<br /><h4 id="username_status">(waiting)</h4><br /><input type="text" name="username" id="username" class="text login_field"><br />
        Email<br /><h4 id="email_status">(waiting)</h4><br /><input type="email" name="email" id="email" class="text login_field"><br />
        --<br />
        Password<br /><input type="password" name="password" id="password" class="text login_field"><br />
        Retype<br /><h4 id="pass_status">(waiting)</h4><br /><input type="r_password" id="password2" name="password" class="text login_field">
        <br />
		<input type="submit" value="Register" class="button green" />
	</form>
</div>

I feel like I must be missing something simple but I can't put my finger on it...

I'm moderately new to JS (programmed in other languages though) and am working on a Google Maps project.

This piece of code should show an alert of the region's name when a map polygon is clicked. Instead, no matter what polygon is clicked, it only does the name for the LAST iterated placemark.

Code:

for (var i = 0; i < placemarks.length; i++) {
	placemark = placemarks[i]
	google.maps.event.addListener(placemark.polygon, "click", function() {
		alert(placemark.name);
	});
}

What am I misisng? What would be a better way of handling this?

hey all,

i'm using this script below that highlights the current link clicked. My site is a horizontal scrolling site so the links just redirect to different parts of the page.
My problem is is that when the page is refreshed the current link is forgotten and the home link is highlighted, even though the page stays in the right place. Is there a way to keep the current link highlighted?

here's the js code:

Code:

$(document).ready(function(){ 

$('#nav a').click(function() {
	$('#nav a').removeClass("selected");
	$(this).addClass("selected");
});

here's the html code
Code:

<style type="text/css"> 
#nav .selected { opacity:1.00;}

#menu .clicked {color:black;}

</style>
	<div id="nav">      	
        	<a href="#home" id="hlink" name="home" style="margin-left:130px">home</a> 
        	<a href="#foamo" id="flink" >foamo</a>  
        	<a href="#book" id="blink" >book</a>
            <a href="#portfolio" id="plink" >portfolio</a>
        	<a href="#contact" id="clink">contact</a>           
      </div>

Thanks

Hi all,

I want to find a Javascript if possible that emmulates the fuctionality shown under Editor's choice on either of these sites.

http://www.irishtimes.com
www.cnn.com

I won't be using video but I would like the user to be able to click on a Left or Right arrow and upon doing this a new batch of Images with associated URL links will slide in.

Problem I have is that I do not know what I should search for. Have tried keywords such as "Image Link Scroller", "Slideshow" but have not found a script that does something like what is on these websites.

Any ideas?

Hey all - trying to find a good rotating box with SEO content. Like this one, do you know what they are using or how I can accomplish this with something similar?

http://www.studioscentral.com/

Thanks in advance