I'm having issues with my code, specifically in the JS function when I try to retrieve values from radio buttons and dropdown menus.
Can someone help me figure out what's going 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>
<input type="radio" name="plusSign" value="PlusSign" />Plus Sign</td>
<input type="radio" name="letterX" value="LetterX" />Letter X</td>
<input type="radio" name="letterH" value="LetterH" />Letter H</td>
</tr>
<tr>
<td>Color Choice:</td>
<select name="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
<option>Green</option>
<option>Orange</option>
</select>
</tr>
<table id="mytable">
<TR>
<TD></TD>
...
// Truncated for brevity
...
<TD></TD>
</TR>
</TABLE>
<tr>
<input type="button" value="Color It" onclick="colorit()" />
<input type="button" value="Clear" onclick="clearit()" />
</tr>
</table>
</Form>