0

我的代码无法正常工作，当我尝试从单选按钮和下拉菜单中获取值时，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>
4

1 回答 1

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;
   }
}
于 2013-05-05T19:10:35.257 回答