JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td>Number of Answers:</td>
<td>
<input type="text" name="numberAnswer" id="numberAnswerTxt" onkeypress="return isNumberKey(event)" onChange="getButtons()" >
</td>
</tr>
<tr>
<td>Answer</td>
<td>
<table>
<tr>
<td>
<input class="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerBName" id="answerB" type="button" value="B" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerCName" id="answerC" type="button" value="C" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerDName" id="answerD" type="button" value="D" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerEName" id="answerE" type="button" value="E" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerFName" id="answerF" type="button" value="F" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerGName" id="answerG" type="button" value="G" onclick="javascript:btnclick(this);"/>
</td>
</tr>
<tr>
<td>
<input class="answerBtns" name="answerHName" id="answerH" type="button" value="H" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerIName" id="answerI" type="button" value="I" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerJName" id="answerJ" type="button" value="J" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerKName" id="answerK" type="button" value="K" onclick="javascript:btnclick(this);"/>
<input class="answerBtns" name="answerLName" id="answerL" type="button" value="L" onclick="javascript:btnclick(this);"/>
<input...
CSS
.answerBtns{
background-color: #ffffff;
border: #666666 1px solid;
color: black;
font-weight:bold;
}
.answerBtnsOff{
background-color: #ffffff;
border: #666666 1px solid;
color: black;
font-weight:bold;
}
.answerBtnsOn{
background-color: red;
border: #666666 1px solid;
color: #ffffff;
font-weight:bold;
}
JavaScript
function getButtons() {
for(var i = 65; i <= 90; i++) { // iterate over character codes for A to Z
var letter = String.fromCharCode(i);
document.getElementById("answer" + letter).className = "answerBtnsOff";
}
document.getElementById("answerTrue").className = "answerBtnsOff";
document.getElementById("answerFalse").className = "answerBtnsOff";
document.getElementById("answerYes").className = "answerBtnsOff";
document.getElementById("answerNo").className = "answerBtnsOff";
// code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}
var currenttotal = 0;
function btnclick(btn) {
if (document.getElementById("numberAnswerTxt").value == "") {
alert('You must first enter in the number of answers you require in the textbox above');
return false;
//if text box empty then send alert
}
if (btn.className == "answerBtnsOn") {
console.log(2);
btn.className = "answerBtnsOff";
currenttotal--;
return false;
//if a button is already selected (in other words "answerBtnsOn), then turn it off if clicked on
}
console.log(currenttotal);
if (document.getElementById("numberAnswerTxt").value == currenttotal) {
alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
return false;
}
if (btn.className == "answerBtnsOff") {
btn.className = "answerBtnsOn";
currenttotal++;
console.log(1);
return false;
//if a button is not selected (in other words "answerBtnsOff), then turn it on if clicked on
}
}