Just when I think I'm understanding javascript...

The following returns the error i is Undefined on the line where i.style.visibility = 'visible'; is in the function.

How come this is so when var i = document.createElement('INPUT'); was declared globally outside the function? Could someone explain why this is happening? Thanks.

Code:
var l = document.createElement('A');
l.id = 'title_link';
l.href = '#';
l.innerHTML = 'Click to change element tag.';
l.onclick = title_link_clicked();
l.style.visibility = 'visible';
document.body.appendChild(l);

var i = document.createElement('INPUT');
i.id = 'title_input';
i.value = '';
i.style.visibility = 'hidden';
document.body.appendChild(i);

// Switch visibility
function title_link_clicked() {
	l.style.visibility = 'hidden';
	i.style.visibility = 'visible';
	return false;
}