title: Hiding/Unhiding the <div> block according to option value in <select> tag in javascript
body: <p>I want to show the  block according to the selected Option and other remaining  should be hidden.But i am not getting the output as desired.Just the options are shown but their related div content is not shown.I am new to Javascript.How can handle this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  
  function yesnoCheck() {
      if (document.getElementById('a').click) {
          document.getElementById('displayA').style.display = 'block';
      }
      else if (document.getElementById('b').click){
        document.getElementById('displayB').style.display = 'block';
      } 
       else if (document.getElementById('c').click){
        document.getElementById('displayC').style.display = 'block';
      } 
      else{
  
        document.getElementById('displayD').style.display = 'block';
      
      }
  
  }
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;select&gt;
    &lt;option onclick="javascript:yesNocheck();" name="b" id="a" value="a"&gt;A&lt;/option&gt;
    &lt;option onclick="javascript:yesNocheck();" name="b" id="b" value="b"&gt;B&lt;/option&gt;
    &lt;option onclick="javascript:yesNocheck();" name="b" id="b" value="b"&gt;C&lt;/option&gt;
    &lt;option onclick="javascript:yesNocheck();" name="b" id="b" value="b"&gt;D&lt;/option&gt;
  &lt;/select&gt;
      &lt;div id="displayA" style="display:none"&gt;
          A is clicked
      &lt;/div&gt;
  
      &lt;div id="displayB" style="display:none"&gt;
          B is clicked
      &lt;/div&gt;
  
      &lt;div id="displayC" style="display:none"&gt;
          C is clicked
      &lt;/div&gt;
  
      &lt;div id="displayD" style="display:none"&gt;
          D is clicked
      &lt;/div&gt;
          
         
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>