addEventlistener and Radio Buttons

JavaScript
1

I’m trying to apply some of the recommendations from the new Sitepoint Book “DHTML Utopia”. Specifically, the use of Scott Andrew’s addEvent cross-browser function. I haven’t managed to master radio buttons yet (grin), and would appreciate any guidance on how to correct my code. In my experimental function optcheck I’d like to pull out the new ‘value’ of the radio button group ‘inputtype’ after it has been clicked. At present optcheck is only called if the top button is clicked.

Thank you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Untitled</title></head>
<body>
<form>
<table>
    <tbody>
	<tr >
	<TD>
	<input name="inputtype" id="inputtype" type="radio" value="Street"> Using your Street name<br />			
	<input name="inputtype" id="inputtype" type="radio" value="PostCode"> Using your Post Code<br />
	<input name="inputtype" id="inputtype" type="radio" value="Test"> Test entry
	</td>
	</tr>
	</tbody>
</table>
</form>
</body>

<SCRIPT type='text/javascript'>
addEvent(window, 'load', addListeners, false);

function optcheck(e) {
	alert("Got here");
    if (window.event) {
      var thing = window.event.srcElement;
    } else {
      var thing = e.target;
    }

    for (var i=0; i<thing.length; i++) {
       if (thing[i].checked) {
          valxx = thing[i].value;
		  continue;
       }
	 }
	 alert(valxx);
}

function addListeners(e) {
  addEvent(document.getElementById('inputtype'), 'click', optcheck, false);
  }

function addEvent(elm, evType, fn, useCapture)
// cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko
// By Scott Andrew
{
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  } else {
    elm['on' + evType] = fn;
  }
}

</script>
</html>
2 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Untitled</title></head>
<body>
<form>
<table>
    <tbody>
	<tr >
	<TD>
	<input name="inputtype" id="inputtype" type="radio" value="Street"> Using your Street name<br />			
	<input name="inputtype" id="inputtype1" type="radio" value="PostCode"> Using your Post Code<br />
	<input name="inputtype" id="inputtype2" type="radio" value="Test"> Test entry
	</td>
	</tr>
	</tbody>
</table>
</form>
</body>

<SCRIPT type='text/javascript'>
addEvent(window, 'load', addListeners, false);

function optcheck(e) {
    if (window.event) {
	alert("Got here");
      var thing = window.event.srcElement;
    } else {
      var thing = e.target;
    }
alert(thing.value)
}

function addListeners(e) {
  addEvent(document.getElementById('inputtype'), 'click', optcheck, false);
  addEvent(document.getElementById('inputtype1'), 'click', optcheck, false);
  addEvent(document.getElementById('inputtype2'), 'click', optcheck, false);
  }

function addEvent(elm, evType, fn, useCapture)
// cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko
// By Scott Andrew
{
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  } else {
    elm['on' + evType] = fn;
  }
}

</script>
</html>

ids must be unique
3

Of course. Excellent. Thank you very much.