title: Text display on radio button clicked
body: <p>I am trying to make a script function which displays text when the user clicks on radio buttons to choose his/her gender. So when the user clicks on female, the text 'hello ma'am' appears, and when Male is clicked, 'Hello sir' is returned. Any suggestions are highly appreciated :)</p>
  
  <p>I have used this script:</p>
  
  <pre><code>    &lt;script&gt;          
  function myFunction() {                
      var checkBox = document.getElementById("myCheck");
      var text = document.getElementById("text");
      if (checkBox.checked == true){
          text.style.display = "block";
      } else {
          text.style.display = "none";
      }
  }
  &lt;/script&gt;
  
  &lt;label for="gender"&gt;&lt;b&gt;Gender&lt;/b&gt;&lt;/label&gt;
  &lt;form action=""&gt;
      &lt;input type="radio" id="myCheck" name="gender" value="male" onclick="myFunction()"&gt;Male
      &lt;p id="text" style="display:none"&gt;Hello sir :)&lt;/p&gt;
  
  
      &lt;input type="radio" id="myCheck" name="gender" value="female" onclick="myFunction()"&gt;Female
      &lt;p id="text" style="display:none"&gt;Hello ma'am :)&lt;/p&gt;
  </code></pre>
  
  <p>But only one of them works, for instance in this case, only when Male is pressed since it's the first one written in the code.</p>