Javascript 收音机和下拉菜单不工作？

我的代码工作不正常，当我试图从单选按钮和下拉菜单中获取值时，JS函数中存在问题

谁能告诉我怎么了

CSS:

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

函数colorit（）{
var字母；
如果（document.getElementsByName（“plusSign”）.checked）字母=“+”；
else if（document.getElementsByName（“letterX”）.checked）letter=“X”；
else if（document.getElementsByName（“letterH”）.checked）letter=“H”；
var colorList=document.getElementsByName（“颜色”）；
var x=document.getElementById（'mytable'）.getElementsByTagName（'td'）；
对于（i=0；i您在这里有一些问题：


getElementByName
应该是
getElementsByName
您需要为
单选按钮指定相同的名称，以便只能选择一个按钮

document.getElementsByName（“letterX”）。选中的
将不起作用，因为它返回多个元素
var colorList=document.getElementsByName（“color”）
应该是
var colorList=document.getElementById（“color”）；
（请确保将
更改为
id=“color”
）

我已经在下面更新了您的代码

更改您的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">

1。
2.
3.
4.

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

函数colorit（）{
var字母；
如果（document.getElementById（“plus”）.checked）字母=“+”；
否则，如果（document.getElementById（“letterx”）.checked）letter=“X”；
否则，如果（document.getElementById（“letterh”）.checked）letter=“H”；
var colorList=document.getElementById（“颜色”）；
var x=document.getElementById（'mytable'）.getElementsByTagName（'td'）；
对于（i=0；iThanks很多Zenith！我知道应该使用'Id'而不是'Name'，但是因为我不知道我的老师是否允许我更改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">

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