How can i get the h:selectOneRadio value with javascript

Hi all.
I have this code
""
<h:selectoneradio id="color" style="font-family: Arial; font-weight: lighter; font-size: 12px;" onclick="showColor()">
<f:selectitem itemlabel="RED" itemvalue="1">
<f:selectitem itemlabel="BLUE" itemvalue="2">
</f:selectitem>
<h:selectoneradio id="color" style="font-family: Arial; font-weight: lighter; font-size: 12px;" onclick="showColor()">
<f:selectitem itemlabel="BLUE" itemvalue="2">"""
</f:selectitem>
<:selectoneradio id="color" style="font-family: Arial; font-weight: lighter; font-size: 12px;" onclick="showColor()">

And javascript function is

function showColor()
{
var tipoRelacion = document.getElementById("form:color").value;
alert("color" + tipoRelacion);

}

And what i get is that color is undefined. How can i get the value of the selected radio?
<h:selectoneradio id="color" style="font-family: Arial; font-weight: lighter; font-size: 12px;" onclick="showColor(this)">
<f:selectitem itemlabel="RED" itemvalue="1">
<f:selectitem itemlabel="BLUE" itemvalue="2">
</f:selectitem>
<h:selectoneradio id="color" style="font-family: Arial; font-weight: lighter; font-size: 12px;" onclick="showColor()">
<f:selectitem itemlabel="BLUE" itemvalue="2">
</f:selectitem>

And javascript function is

function showColor(obj)
{
var val = obj.value
alert("color" +val);

}