```
<html>
    <head>
        <script>
          function check(){
          var button =document.getElementsByName("rdName");
          //rdName is the name of the radio buttons//
          var style =document.getElementsByName("spans");
          // spans is the name of the span tags included//
          for(var i=0; i<button.length;i++){
             if(button[i].checked == true){
                 document.getElementById(style[i].id).innerHTML ="YOU ARE:" + button[i].value;
             }
          }
        }
        </script>
    </head>
    <body>
    <form id="myForm">
        <center>
            <input type="radio" id="radio1" name="rdName" onclick="check()" value="male"> male
            <input type="radio" id="radio2" name="rdName" onclick="check()" value="female">female
            // corresponding span tags for the radio buttons//
            <span id="sp1" name="spans" style="background:red"></span>
            <span id="sp2" name="spans" style="background:blue"></span>
         </center>
    </form>
    </body>
    </html>

```

Here i have 2 buttons and 2 span tags.
when first button is clicked i want to display the text in the first span style.
when second button is selected i need to display the text in the second span style.
This code works,but when i click the select the second radio button after i clicked the first radio button i get both text in different spans in the window.
I only want to see the particular span style for the radio button selected at a time.