show/hide drop down

Question

here is my code:

Answer 1

Your biggest issue here is that the javascript is going to execute prior to the radio buttons being created. Therefore document.getElementById(...) is not going to find the element, as it doesn't exist. Try adding your code to a function and having that function run onload of the body.

Answer 2

You have to wait until your object (radio button load) Here is some code that works. Or call the window.onload

<script type="text/javascript">
    function checkEm() {
        if (document.getElementById("radio1").checked) {
            document.getElementById("list1").style.visibility = "hidden";
            document.getElementById("list1").style.display = "none";
        };

        if (document.getElementById("radio2").checked) {
            document.getElementById("list1").style.visibility = "visible";
            document.getElementById("list1").style.display = "block";
        };
    };
    </script>

 <label><input id="radio1" type="radio" name="hospital" onclick="checkEm()"  /> Not Complete </label>
<label><input id="radio2" type="radio" name="hospital" onclick="checkEm()" /> Complete </label>

Answer 3

as a side issue you dont need the style.visibility... line

one more thing:

Typically, its better to add event listeners using the attachEvent or addEventListener methods (allows more control, and multiple listeners for one action) like this:

function addEvent(el, eType, fn, uC) {
  if (el.addEventListener) {
    el.addEventListener(eType, fn, uC);
    return true;
  } 
  else if (el.attachEvent) {
    return el.attachEvent('on' + eType, fn);
  }
  else {
    el['on' + eType] = fn;
  }
}

and then just use

addEvent(
    document.getElementById("radio1"),
    "change",
    function(){
      if(this.checked == true){
            document.getElementById("list1").style.display = "none";
      }
    },
    false);

This is both cross-browser and better practice

Answer 4

I think its because the code is executed BEFORE the list is actually added to the document structure. Encapsulate it in a window.onload handler like this:

...
<script type="text/javascript">
window.onload=function()
{
    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";
        }
    };
}
</script>
...

Lg
warappa