Question

关于JavaScript的标签onclick的动态传参问题

原始的HTML为：

<form method="POST" name="bgcolor">
<center>
<table border=2 cellpadding=5 cellspacing=3 width=100%>
<tr>
<td width="25%">
<input name="bgcolor1" type=radio onClick="ChangeColor(this.form, 'aliceblue')">
艾利斯兰 </td>
<td width="25%">
<input name="bgcolor2" type=radio checked onClick="ChangeColor(this.form, 'antiquewhite')">
古董白 </td>
</tr>
</table>
</center>
</form>

现在我想让这个onclick事件在外部进行绑定，我尝试过的方法：
<script language="JavaScript" type="text/javascript" src="popup2.js">
</script>
其中的popup2.js里的代码是如下：
document.getElementByName("bgcolor1").onclick = function() {ChangeColor(this.form, 'aliceblue');};
document.getElementByName("bgcolor2").onclick = function() {ChangeColor(this.form, 'antiquewhite');};
但是这个方法失败了。请教有没有办法对那些input标签的onclick事件进行动态绑定？
PS：请用原生JS，不要用JQuery，谢谢大家。

Answer 1

document.getElementByName("bgcolor1").onclick

这是错误的，正确的是：
document.getElementsByName("bgcolor1")[0].onclick

注意，By前面有s，因为它返回的是数组，同样，因为是数组，所以要指定具体元素，如果无重名元素则是[0]

另一个也一样

追答

单选按钮的name要设为相同的，系统才会认为是同一组的，而同一组的单选按钮才能实现“单选”的效果。比如：

<form>
<input name="bgcolor" type=radio value="red">红
<input name="bgcolor" type=radio value="green">绿
<input name="bgcolor" type=radio value="blue">蓝
</form>

<script>
window.onload=function(){
   var body=document.getElementsByTagName("body")[0];
   var obj=document.getElementsByName("bgcolor");
   for(i=0;i<obj.length;i++){
      obj[i].onclick=function(){
         body.style.backgroundColor=this.value;
      }
   }
}
</script>