收音机和DropDown菜单不工作？

Question

我的代码无法正常工作，当我尝试从单选按钮和下拉菜单获取值时，JS功能出现问题。

谁能告诉我什么是错的？

CSS：

#mytable { 
    width:400px; 
    border: 1pt solid black; 
} 
#mytable tr { 
    height:50px; 
} 
#mytable td { 
    width:20%; 
    border: 1px solid black; 
} 

的Javascript：

function colorit(){ 
    var letter; 
    if(document.getElementsByName("plusSign").checked) letter = "+"; 
    else if(document.getElementsByName("letterX").checked) letter = "X"; 
    else if(document.getElementsByName("letterH").checked) letter = "H"; 

    var colorList = document.getElementsByName("color"); 

    var x = document.getElementById('mytable').getElementsByTagName('td'); 
    for(i=0;i<x.length;i++) { 
    x[i].style.backgroundColor = colorList.options[colorList.selectedIndex].text; 
    x[i].innerHTML = letter; 
    } 
} 

function clearit(){ 
    var x = document.getElementById('mytable').getElementsByTagName('td'); 
    for(i=0;i<x.length;i++) { 
    x[i].style.backgroundColor = ""; 
    x[i].innerHTML = ""; 
    } 
} 

HTML：

<form name="frm1"> 
    <table> 
     <tr> 
      <td>Pattern Choice:</td> 
      <td> 
       <input type="radio" name="plusSign" value="PlusSign" />Plus Sign</td> 
      <td> 
       <input type="radio" name="letterX" value="LetterX" />Letter X</td> 
      <td> 
       <input type="radio" name="letterH" value="LetterH" />Letter H</td> 
     </tr> 
     <tr> 
      <td>Color Choice:</td> 
      <td> 
       <select name="color"> 
        <option>Red</option> 
        <option>Blue</option> 
        <option>Yellow</option> 
        <option>Green</option> 
        <option>Orange</option> 
       </select> 
      </td> 
     </tr> 
     <table id="mytable"> 
      <TR> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
      </TR> 
      <TR> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
      </TR> 
      <TR> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
      </TR> 
      <TR> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
      </TR> 
      <TR> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
       <TD></TD> 
      </TR> 
     </TABLE> 
     <tr> 
      <input type="button" value="Color It" onclick="colorit()" /> 
      <input type="button" value="Clear" onclick="clearit()" />   
     </tr>  
      </table> 
</Form> 

Answer 1

你有几个问题在这里：

• getElementByName应该getElementsByName
• 你需要给radio按钮相同的名称，因此，只有一个可以选择
• document.getElementsByName("letterX").checked因为它返回一个以上的元素将无法正常工作。
• var colorList = document.getElementsByName("color")应该var colorList = document.getElementById("color");（一定要改变你的<select>到id="color"）

我已经更新了你的代码在以下jsFiddle。

更改您的HTML：

1. <input type="radio" id="plus" name="radioButton" value="PlusSign" /> 
2. <input type="radio" id="letterx" name="radioButton" value="LetterX" /> 
3. <input type="radio" id="letterh" name="radioButton" value="LetterH" /> 
4. <select id="color"> 

的JavaScript：

function colorit(){ 
    var letter; 
    if(document.getElementById("plus").checked) letter = "+"; 
    else if(document.getElementById("letterx").checked) letter = "X"; 
    else if(document.getElementById("letterh").checked) letter = "H"; 
    var colorList = document.getElementById("color"); 
    var x = document.getElementById('mytable').getElementsByTagName('td'); 
    for(i=0;i<x.length;i++) { 
    x[i].style.backgroundColor = colorList.options[colorList.selectedIndex].text;  
    x[i].innerHTML = letter; 
    } 
}