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ボタンに同じ名前を付けて、1 つだけを選択できるようにする必要があります。
  • 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 に答える