为什么我在这个简单的JavaScript代码中得到“未定义”？

Question

<script>
initConsole();

function updateConsole(){
	for(i=0;i<5;i++){
		console[i] = console[i+1];
		document.getElementById(i).innerHTML = console[i];
	}
	console[5] = "Add line of text.";
}


function initConsole(){
	var console = new Array("0","1","2","3","4");
	for(i=0;i<5;i++){
		document.getElementById(i).innerHTML = console[i];
	}
}

</script>

<div id="console">
	<p id="0"></p>
	<p id="1"></p>
	<p id="2"></p>
	<p id="3"></p>
	<p id="4"></p>
</div>

<input type="button" value="Add Line" onclick="updateConsole()"/>

这个想法是我有这5行，每次点击按钮，所有行都会向上移动1个位置，最后一行将用新文本更新。实际发生的是当我单击按钮时，所有行都变为'undefined'，并且当我一直点击时，底线会更新。为什么会这样？