title: Difference between x = document.getElementById("id").className = & x = document.getElementById("id"), x.className =
body: <p>What's the difference in the codes below:</p>
  
  <pre><code>&lt;div class="w3-dropdown-click"&gt;
      &lt;button class="w3-btn" onclick="clickDrp()"&gt;Hover Over me&lt;/button&gt;
      &lt;div class="w3-dropdown-content w3-animate-zoom w3-bar-block" id="cont"&gt;        
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink1&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink2&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink3&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink4&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      function clickDrp(){
          var x = document.getElementById("cont").className;
          if(x.search("w3-show") == -1)
              x += " w3-show";
          else
              x = x.replace(" w3-show","");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;div class="w3-dropdown-click"&gt;
      &lt;button class="w3-btn" onclick="clickDrp()"&gt;Hover Over me&lt;/button&gt;
      &lt;div class="w3-dropdown-content w3-animate-zoom w3-bar-block" id="cont"&gt;        
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink1&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink2&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink3&lt;/a&gt;
          &lt;a href="#" class="w3-bar-item w3-button"&gt;SomeLink4&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      function clickDrp(){
          var x = document.getElementById("cont");
          if(x.className.search("w3-show") == -1)
              x.className += " w3-show";
          else
              x.className = x.className.replace(" w3-show","");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In the second one Dropdown menu works fine.
  In the first it does not even if x is made global variable.</p>
  
  <p>I'm new to Javascript and I'm unable to figure out the reason.
  Can someone reason it out?</p>
  
  <p>PS: I've used w3-css</p>