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;
   }
}

收音机和DropDown菜单不起作用？

1 个答案: