I'm learning how to do different things with JavaScript and HTML for webpage design and I ran into a problem I can't figure out and can't seem to find when I look for a solution.
I'm making a simple check box table where you are asked a question, you select an answer and a response gets updated based on your answer. The user can click the boxes and the response will always be updated. I only have one funtion in my JS right now because I was trying to get it to work first before writing the other two. Here is what I have.
function StrengthCheckbox() {
var strengthCheckYes = document.getElementById("strengthCheckYes");
var strengthCheckNo = document.getElementById("strengthCheckNo");
if (strengthCheckYes === document.getElementById("strengthCheckYes").checked) {
document.getElementById("checkboxStrengthResponse").value = "You wrestled Putin in your past life didn't you?";
} else if (strengthCheckNo === document.getElementById("strengthCheckNo").checked) {
document.getElementById("checkboxStrengthResponse").value = "That could be a problem sometime in the future";
} else if ((strengthCheckYes === document.getElementById("strengthCheckYes").checked) && (strengthCheckNo === document.getElementById("strengthCheckNo").checked)) {
document.getElementById("checkboxStrengthResponse").value = "So which is it? Yes or No? Stop playing around!";
}
};
<thead>
<th colspan="3">Checkbox Version</th>
</thead>
<tbody>
<tr>
<td>
<p>Question</p>
</td>
<td>
<p>Answer</p>
</td>
<td>
<p>My Response</p>
</td>
</tr>
<tr>
<td>
<p>Can you fight with your bare hands?</p>
</td>
<td>
<input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input>
<input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input>
</td>
<td>
<input type="text" id="checkboxStrengthResponse" size="60px" disabled></input>
</td>
</tr>
<tr>
<td>
<p>Are you able to outrun a flying car?</p>
</td>
<td>
<input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input>
<input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input>
</td>
<td>
<input type="text" id="checkboxSpeedResponse" size="60px" disabled></input>
</td>
</tr>
<tr>
<td>
<p>Can you out play a super AI in chess?</p>
</td>
<td>
<input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input>
<input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input>
</td>
<td>
<input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input>
</td>
</tr>
</tbody>
</table>
Any help is welcome. Also, I don't know JQuery and I'm sure it can be done using that but I would like only JS answers if you could. Thank you again
Aucun commentaire:
Enregistrer un commentaire