Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Html</p> <pre><code>&lt;p id="hospitalorientation"&gt;&lt;label&gt;Hospital Orientation:&lt;/label&gt; &lt;div id='buttons'&gt; &lt;label&gt;&lt;input id="radio1" type="radio" name="hospital" /&gt; Not Complete &lt;/label&gt; &lt;label&gt;&lt;input id="radio2" type="radio" name="hospital" /&gt; Complete &lt;/label&gt; &lt;/div&gt; &lt;div id="list1" style="display: none;"&gt; &lt;label&gt;Month Complete: &lt;select&gt; &lt;option&gt;January&lt;/option&gt; &lt;option&gt;February&lt;/option&gt; &lt;option&gt;March&lt;/option&gt; &lt;option&gt;April&lt;/option&gt; &lt;option&gt;May&lt;/option&gt; &lt;option&gt;June&lt;/option&gt; &lt;option&gt;July&lt;/option&gt; &lt;option&gt;August&lt;/option&gt; &lt;option&gt;September&lt;/option&gt; &lt;option&gt;October&lt;/option&gt; &lt;option&gt;November&lt;/option&gt; &lt;option&gt;December&lt;/option&gt; &lt;/select&gt; &lt;/label&gt; &lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>document.getElementById("radio1").onchange = function(){ if(this.checked == true){ document.getElementById("list1").style.visibility = "hidden"; document.getElementById("list1").style.display = "none"; } }; document.getElementById("radio2").onchange = function(){ if(this.checked == true){ document.getElementById("list1").style.visibility = "visible"; document.getElementById("list1").style.display = "block"; } }; </code></pre> <p>Working Example: <a href="http://jsfiddle.net/aSxXA/" rel="nofollow">http://jsfiddle.net/aSxXA/</a></p> <p>Here is an update, this is a full html page, notice how the body onload event registers the eventHandlers, I think the document may not have been loaded when you were trying to register them before</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;script type=text/javascript&gt; function registerEventHandlers() { document.getElementById("radio1").onchange = function(){ hideDiv(this,"list1") }; document.getElementById("radio2").onchange = function(){ showDiv(this,"list1") }; document.getElementById("radio3").onchange = function(){ hideDiv(this,"list2") }; document.getElementById("radio4").onchange = function(){ showDiv(this,"list2") }; } function showDiv(targetElement,toggleElementId){ if (targetElement.checked == true) { document.getElementById(toggleElementId).style.visibility = "visible"; document.getElementById(toggleElementId).style.display = "block"; } } function hideDiv(targetElement,toggleElementId){ if (targetElement.checked == true) { document.getElementById(toggleElementId).style.visibility = "hidden"; document.getElementById(toggleElementId).style.display = "none"; } } &lt;/script&gt; &lt;/head&gt; &lt;body onload="registerEventHandlers();"&gt; &lt;p id="hospitalorientation"&gt; &lt;label&gt; Hospital Orientation: &lt;/label&gt; &lt;div id='buttons'&gt; &lt;label&gt; &lt;input id="radio1" type="radio" name="hospital" /&gt; Not Complete &lt;/label&gt; &lt;label&gt; &lt;input id="radio2" type="radio" name="hospital" /&gt; Complete &lt;/label&gt; &lt;/div&gt; &lt;div id="list1" style="display: none;"&gt; &lt;label&gt; Month Complete: &lt;select&gt; &lt;option&gt;January&lt;/option&gt; &lt;option&gt;February&lt;/option&gt; &lt;option&gt;March&lt;/option&gt; &lt;option&gt;April&lt;/option&gt; &lt;option&gt;May&lt;/option&gt; &lt;option&gt;June&lt;/option&gt; &lt;option&gt;July&lt;/option&gt; &lt;option&gt;August&lt;/option&gt; &lt;option&gt;September&lt;/option&gt; &lt;option&gt;October&lt;/option&gt; &lt;option&gt;November&lt;/option&gt; &lt;option&gt;December&lt;/option&gt; &lt;/select&gt; &lt;/label&gt; &lt;/div&gt; &lt;p id="ppd"&gt; &lt;label&gt; PPD: &lt;/label&gt; &lt;div id='buttons'&gt; &lt;label&gt; &lt;input id="radio3" type="radio" name="ppd" /&gt; Not Complete &lt;/label&gt; &lt;label&gt; &lt;input id="radio4" type="radio" name="ppd" /&gt; Complete &lt;/label&gt; &lt;/div&gt; &lt;div id="list2" style="display: none;"&gt; &lt;label&gt; Month Complete: &lt;select&gt; &lt;option&gt;January&lt;/option&gt; &lt;option&gt;February&lt;/option&gt; &lt;option&gt;March&lt;/option&gt; &lt;option&gt;April&lt;/option&gt; &lt;option&gt;May&lt;/option&gt; &lt;option&gt;June&lt;/option&gt; &lt;option&gt;July&lt;/option&gt; &lt;option&gt;August&lt;/option&gt; &lt;option&gt;September&lt;/option&gt; &lt;option&gt;October&lt;/option&gt; &lt;option&gt;November&lt;/option&gt; &lt;option&gt;December&lt;/option&gt; &lt;/select&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload