Click textbox to show answer and highlight related text 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.

JSBin



&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;   &lt;title&gt;Quiz&lt;/title&gt;        

&lt;script&gt;
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 &lt; 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";        
} 
}
&lt;/script&gt;
&lt;style type="text/css"&gt; .ansText {visibility: hidden}  &lt;/style&gt; 

&lt;/head&gt;
&lt;form name="form1"&gt;
&lt;!-- Question 1 --&gt;
Q1: 3 &lt;span id="win1" name="win1"&gt; 5 &lt;/span&gt; &lt;span id="win1" name="win1"&gt; 10 &lt;/span&gt; 
&lt;span class="click"&gt; Click&lt;/span&gt; 
&lt;input onclick="hlt_showhide(this)" type="checkbox" name=""  answer="1"&gt; 

&lt;!-- Answer 1 --&gt;
A1: &lt;span id="ans1" class="ansText"&gt; revealed text refers to 2nd &amp; 3rd highlighted numbers &lt;/span&gt;
&lt;hr id="q_a"&gt;

&lt;!-- Question 2 --&gt;
Q2: &lt;span id="win2" name="win2"&gt; 7 &lt;/span&gt; 28 &lt;span id="win2" name="win2"&gt; 37 &lt;/span&gt; 
&lt;span class="click"&gt; Click&lt;/span&gt; 
&lt;input onclick="hlt_showhide(this)" type="checkbox" name="" answer="2"&gt; 

&lt;!-- Answer 2 --&gt;
A2: &lt;span id="ans2" class="ansText"&gt; revealed text refers to 1st &amp; 3rd highlighted numbers&lt;/span&gt;
&lt;hr id="q_a"&gt;

&lt;/form&gt;

&lt;/html&gt;
Here are my thoughts:


Most importantly from the first look at the code: Use proper variable names. No one knows what you mean with EEE, xxx or e2. And while you are at it: in JavaScript it's a convention to start variable names with a lower case letter.
Don't make up attributes such as "answer" - you can't say if an unknown browser can work with them. At least you should adhere to HTML5 and prefix the custom attribute with data-. 
name is not a valid attribute for span (or any other object other than form elements). Unfortunately there is no simple, cross-browser alternative for selecting multiple elements. The easiest soltuion with be to use a class and getElementsByClassName, however the latter isn't supported by all browsers yet, but there are implementations for the non-supporters easily available on the web.
The "Click" text is bad for two reasons: A) You can't actually click on it and B) texts such as "click here" is bad UI. Instead wrap the text together with the checkbox in a &lt;label&gt; element, such allows the user to click on the text to activate the checkbox and use a text such as "Show solution" instead.
Finally, there are more elegant ways to switch on the answers. Instead of looking of a specifc ID, set (or remove) a class on an element surrounding the question and use CSS to highlight/show the sub elements. Example: http://jsbin.com/ayoqem/7/edit