Is this JavaScript code robust? It is for an interactive book about a card game. When the reader clicks on the checkbox, an answer is revealed and related text is highlighted. I need to get this right before I write more chapters.
<!DOCTYPE html>
<html>
<head> <title>Quiz</title>
<script>
function hlt_showhide(EEE){
"use strict";
var xxx = EEE.getAttribute('answer');
var win_num = "win" + xxx;
var e2 = document.getElementsByName(win_num);
var countE2 = e2.length;
for (var i = 0; i < countE2; i++) {
e2[i].style.backgroundColor = (EEE.checked) ? "#FFCC66" : "#FFFFFF";
}
var ans_num = "ans" + xxx;
var AAA = document.getElementById(ans_num);
if (AAA !== null) {
AAA.style.visibility = (EEE.checked) ? "visible" : "hidden";
}
}
</script>
<style type="text/css"> .ansText {visibility: hidden} </style>
</head>
<form name="form1">
<!-- Question 1 -->
Q1: 3 <span id="win1" name="win1"> 5 </span> <span id="win1" name="win1"> 10 </span>
<span class="click"> Click</span>
<input onclick="hlt_showhide(this)" type="checkbox" name="" answer="1">
<!-- Answer 1 -->
A1: <span id="ans1" class="ansText"> revealed text refers to 2nd & 3rd highlighted numbers </span>
<hr id="q_a">
<!-- Question 2 -->
Q2: <span id="win2" name="win2"> 7 </span> 28 <span id="win2" name="win2"> 37 </span>
<span class="click"> Click</span>
<input onclick="hlt_showhide(this)" type="checkbox" name="" answer="2">
<!-- Answer 2 -->
A2: <span id="ans2" class="ansText"> revealed text refers to 1st & 3rd highlighted numbers</span>
<hr id="q_a">
</form>
</html>