title: How to get value of drop down to text area
body: <p>I have 3 functions (radio, textarea, and dropdown)
  I was able to get the value of radio and textarea into textarea however the drop down isn't working</p>
  
  <p>What I am trying to do is when I select an option to Radio it will show on textarea result then When a user enters a text in textarea it will add to textarea then when a User select an option to drop down it will get the value of the specific dropdown option to textarea
  so</p>
  
  <p>(radio+text+dropdown = single text area)</p>
  
  <p>I already tried some codes but it doesn't seem to be working</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
  &lt;p&gt;Select Email templates below&lt;/p&gt;
  
  &lt;!-- Mr/Mrs and Customer name field start here --&gt;
    &lt;form id="mainForm" name="mainForm"&gt;
      &lt;input type="radio" name="gender" value="Mr. " /&gt;Mr.
      &lt;input type="radio" name="gender" value="Mrs. " /&gt;Mrs.
      &lt;textarea id="textarea" placeholder="Enter customer name here" oninput="renderYourText()"&gt;&lt;/textarea&gt;
    &lt;/form&gt;
  &lt;!-- Mr/Mrs and Customer name field end here --&gt;
  
  &lt;!-- Email template drop down start here --&gt;
  &lt;div class="button dropdown"&gt; 
    &lt;select id="colorselector"&gt;
       &lt;option&gt;&lt;/option&gt;
       &lt;option value="Cancellation"&gt;Cancellation&lt;/option&gt;
       &lt;option value="Refund"&gt;Refund&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div id="Cancellation" class="colors red"&gt; 
  
  This is email template for cancellation
  
  &lt;/div
  
  &lt;div id="Refund" class="colors red"&gt; 
  
  This is email template for refund
  
  &lt;/div
  
  &lt;/p&gt;
   &lt;/div&gt;
  
  &lt;!-- Email template drop down start here --&gt;
  
  &lt;!-- Text area result box start here --&gt;
  Real time generated email template
  &lt;textarea class="form-control" rows="5" id="result" name="text"&gt;&lt;/textarea&gt;
  &lt;!-- Text area result box end here --&gt;
  
  &lt;!-- Jquery and Javascript start here --&gt;
  &lt;script&gt;
  document.mainForm.onclick = function(){
    renderYourText()
  }
  function renderYourText(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    var y = document.getElementById('textarea').value;
    var x = document.getElementById('Cancellation').value;
    document.getElementById('result').innerHTML ='Dear '+gender + y + ', \n \n' + x;
  }
  
  &lt;/script&gt;
  &lt;!-- Jquery and Javascript end here --&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>add radio button value + textarea value + dropdown value into single text area</p>
  
  <p>example:</p>
  
  <pre><code>Dear User,
  &lt;br&gt;
  &lt;br&gt;
  dropdown value
  </code></pre>