calling a function from another function by 'onclick' event

Question

What I am trying to do is, call a function from another function by clicking a radio button in that function. Here is the code I have worked on so far-

<script type="text/javascript">
rad1 = document.createElement("input");
rad1.type = "radio";
rad1.name = "dooropt";
rad1.id = "rb1";
rad1.value = "y";
newP.appendChild(rad1);
text1 = document.createTextNode("Yes ");
newP.appendChild(text1);
rad2 = document.createElement("input");
rad2.type = "radio";
rad2.name = "dooropt";
rad2.id = "rb2";
rad2.value = "n";
newP.appendChild(rad2);
text2 = document.createTextNode("No ");
newP.appendChild(text2);
button1 = document.createElement("input");
button1.type = "button";
button1.value = "Open main door";
button1.style.visibility = "hidden";
newP.appendChild(button1);
button2 = document.createElement("input");
button2.type = "button";
button2.value = "Open apartment door";
button2.style.visibility = "hidden";
newP.appendChild(button2);
area.appendChild(newP);
rad1.onclick = mainalso();
rad2.onclick = onlyapp();
}

 function mainalso()
{ 
    button1.style.visibility="visible";
    button2.style.visibility="visible";
    }

 function onlyapp()
{
    button2.style.visibility="visible";
    button1.style.visibility="hidden";
    }
</script>

Now, whenever rad1 is clicked, i want mainalso() to run, as might be clear from the code. Since I am fairly new to JavaScript, I don't know where i'm making the mistake, in syntax or conceptually. Also, the first function (before mainalso()) is add(), and in it I repeatedly append same content on clicking a button in my body. I hope it is clear what I want to do. When rad1 is clicked, i want both buttons (button1 and button2) to appear, but on clicking rad2 I want only one button to appear. Both have been set to 'hidden' visibility at first. Please help me out. Sorry if it seems unclear, I tried my best.. Thank you.

Answer 1

You have to define newP and area that you are using :
area.appendChild(newP);

As the tag HTML is used like this :

<input  type="radio" name="dooropt" id="rb1" value="y" onClick="mainalso()"/> 

So you can use :

rad1.onClick=mainalso;

Answer 2

Try changing:

rad1.onclick = mainalso();
rad2.onclick = onlyapp();

To:

rad1.onclick = mainalso;
rad2.onclick = onlyapp;

As it stands you're assigning the result of calling the functions to the onclick of rad1 and rad2 which in this case will be undefined. By removing the () you will assign the function correctly.

To ensure that button1 and button2 are available and set to the correct value when your function is called you could change the code to:

...
newP.appendChild(button2);
area.appendChild(newP);
(function (b1, b2) {
    rad1.onclick = function () {
        b1.style.visibility="visible";
        b2.style.visibility="visible";
    };
    rad2.onclick = function () {
        b2.style.visibility="visible";
        b1.style.visibility="hidden";
    };
})(button1, button2);

Answer 3

You should do this:

rad1.onclick = mainalso;
rad2.onclick = onlyapp;

Edit: I tried this and it works for me. See example

window.onload = function() {
rad1 = document.createElement("input");
rad1.type = "radio";
rad1.name = "dooropt";
rad1.id = "rb1";
rad1.value = "y";
newP.appendChild(rad1);
text1 = document.createTextNode("Yes ");
newP.appendChild(text1);
rad2 = document.createElement("input");
rad2.type = "radio";
rad2.name = "dooropt";
rad2.id = "rb2";
rad2.value = "n";
newP.appendChild(rad2);
text2 = document.createTextNode("No ");
newP.appendChild(text2);
button1 = document.createElement("input");
button1.type = "button";
button1.value = "Open main door";
button1.style.visibility = "hidden";
newP.appendChild(button1);
button2 = document.createElement("input");
button2.type = "button";
button2.value = "Open apartment door";
button2.style.visibility = "hidden";
newP.appendChild(button2);
area.appendChild(newP);
rad1.onclick = mainalso();
rad2.onclick = onlyapp();
}