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

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);