Radio And DropDown Menu Are Not Working?

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 {

Solution 1:

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