收音机和DropDown菜单不工作？ [英] Radio and DropDown Menu are not working?
本文介绍了收音机和DropDown菜单不工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的代码工作不正常，当我尝试从单选按钮和下拉菜单中获取值时，JS功能出现问题。
任何人都可以告诉我什么是错的？
CSS：
#mytable {
width：400px;
border：1pt纯黑色;
}
#mytable tr {
height：50px;
}
#mytable td {
width：20％;
border：1px纯黑色;
Javascript：
函数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;
函数clearit（）{
var x = document.getElementById（'mytable'）。getElementsByTagName（'td'）;
for（i = 0; i< x.length; i ++）{
x [i] .style.backgroundColor =;
x [i] .innerHTML =;
$ / code $ / pre
$ b HTML：
< form name =frm1>
< table>
< tr>
< td>模式选择：< / td>
< td>
< input type =radioname =plusSignvalue =PlusSign/>加号< / td>
< td>
< input type =radioname =letterXvalue =LetterX/> Letter X< / td>
< td>
< input type =radioname =letterHvalue =LetterH/>字母H< / td>
< / tr>
< tr>
< td>色彩选择：< / td>
< td>
< select name =color>
< option> Red< / option>
< option>蓝色< /选项>
< option>黄色< /选项>
< option>绿色< /选项>
< 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 =buttonvalue =Color Itonclick =colorit（）/>
< input type =buttonvalue =Clearonclick =clearit（）/>
< / tr>
< / table>
< / Form>
解决方案这里有几个问题：
-
getElementByName 应该是 getElementsByName
- 您需要为
radio 按钮指定相同的名称，以便只能选择一个
-
document.getElementsByName（letterX）。checked 将不起作用，因为它返回多个元素。
-
var colorList = document.getElementsByName（color）应该是 var colorList = document.getElementById（color）; （be确保将< select> 更改为 id =color）
我已在以下 jsFiddle 。
$ b 对 HTML 所做的更改： 1。 < input type =radioid =plusname =radioButtonvalue =PlusSign/>
2.< input type =radioid =letterxname =radioButtonvalue =LetterX/>
3.< input type =radioid =letterhname =radioButtonvalue =LetterH/>
4.< select id =color>
JavaScript：
函数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;
}
}
My code is not working properly, problems are in the JS function when I trying to get value from radio button and dropdown menu.
Can anyone tell me what's wrong?
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>
解决方案 You have a few issues here:
getElementByName should be getElementsByName- You need to give the
radio buttons the same name, so that only one can be selected
document.getElementsByName("letterX").checked won't work as it returns more than one element.var colorList = document.getElementsByName("color") should be var colorList = document.getElementById("color"); (be sure to change your <select> to id="color")
I've updated your code in the following jsFiddle.
Changes to your 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菜单不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
