how to return a value to a document.getElementById()

Hi all..what i'm trying to do is change the backgroundColor of my input text with js..

this the js part

function CreateCFormArray(){
var y=document.getElementsByName("cf");
//alert(y[0].value);
for(i = 0; i < y.length; i++) {
if(y[i].id=='cf1' && y[i].value=='0'){
changeCssProp(name);
}
if(y[i].id=='cf2' && y[i].value=='0'){
changeCssProp(phone);
}
}
}
var thefield;
function changeCssProp(thefield) {
document.getElementById(thefield).style.backgroundColor="#FF0000";
}


and this is the html part


<form id="form1" name="form1" method="post" action="">
<table width="100%" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>name</td>
<td>
<label>
<input type="text" name="name" id="name" />
</label>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>phone</td>
<td>
<label>
<input type="text" name="phone" id="phone" />
</label>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<label>
<input type="button" name="Submit" value="Submit" onclick="CreateCFormArray()" />
</label>
</td>
<td>
<input name="cf" type="hidden" id="cf1" value="0" />
<input name="cf" type="hidden" id="cf2" value="0" />
</td>
<td>&nbsp;</td>
</tr>
</table>
</form>


basicly what the script do is to check the hidden field cf with value of '0' if found it will execute changeCssProp(thefield)..but the problem is js return error of document.getElementById(thefield) is null
can someone help me with..thanking you all in advance for reviewing my

http://www.codingforums.com/showthread.php?t=17515

if(y[i].id=='cf1' && y[i].value=='0'){
changeCssProp('name');
}
if(y[i].id=='cf2' && y[i].value=='0'){
changeCssProp('phone');
}