title: How can I check for a specific class using javascript?
body: <p>So I need to be able to check if a specified id has a specific class, but I'm not completely sure on how to do that.</p>
  
  <p>Here is my code. You can see my attempt at checking a id for a specific class in the homeTransition function.</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>function homeTransition()
      {   
          if(document.getElementById("aboutContent").hasClass("animated fadeInUp")){
              document.getElementById("aboutContent").className = " animated slideOutDown";
          } else if(document.getElementById("projectsContent").hasClass("animated fadeInUp")){
              document.getElementById("projectsContent").className = " animated slideOutDown";
              } else if(document.getElementById("contactContent").hasClass("animated fadeInUp")){
                  document.getElementById("contactContent").className = " animated slideOutDown";
              }
                      document.getElementById("astronaut").className = " animated fadeIn";
      }
  
  function aboutTransition()
      {   
          document.getElementById("astronaut").className = " animated fadeOut";
          document.getElementById("aboutContent").className = " animated fadeInUp";
          
          document.getElementById("projectsContent").className = " animated fadeOutLeft";
          document.getElementById("contactContent").className = " animated fadeOutLeft";
      }
  
  function projectsTransition()
      {   
          document.getElementById("astronaut").className = " animated fadeOut";
          document.getElementById("projectsContent").className = " animated fadeInUp";
          
          document.getElementById("aboutContent").className = " animated fadeOutLeft";
          document.getElementById("contactContent").className = " animated fadeOutLeft";
      }
  
  function contactTransition()
      {
          document.getElementById("astronaut").className = " animated fadeOut";
          document.getElementById("contactContent").className = " animated fadeInUp";
          
          document.getElementById("aboutContent").className = " animated fadeOutLeft";
          document.getElementById("projectsContent").className = " animated fadeOutLeft";
      }
  
  //Menu
  function expand(){
    $(this).toggleClass("on");
    $(".menu").toggleClass("active");
  };
  $(".button").on('click', expand);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: "Source Sans Pro", sans-serif;
    color: #ccc;
    z-index: -100;
    background-color: black;
    overflow: hidden;
  }
  
  #aboutContent {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: all 250ms;
    -webkit-transform: translateZ(0) translateX(-100%);
    transform: translateZ(0) translateX(-100%);
    background-color: #2b2b41;
    z-index: -1;
  }
  
  #projectsContent {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: all 250ms;
    -webkit-transform: translateZ(0) translateX(-100%);
    transform: translateZ(0) translateX(-100%);
    background-color: #42424b;
    z-index: -1;
  }
  
  #contactContent {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: all 250ms;
    -webkit-transform: translateZ(0) translateX(-100%);
    transform: translateZ(0) translateX(-100%);
    background-color: #353440;
    z-index: -1;
  }
  
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;
    background: rgba(45, 51, 54, 0.9);
    width: 18%;
    box-sizing: border-box;
    transition: all 250ms;
    -webkit-transform: translateZ(0) translateX(-100%);
    transform: translateZ(0) translateX(-100%);
    text-align:center;
    box-shadow: 0 0 20px #000000;
  }
  
  .active {
    transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    color: #e5e5e5;
  }
  
  h1 {
    margin-top:60%;
    font-size: 2.5em;
    cursor: default;
  }
  
  ul {
    padding:0;
    list-style:none;
    font-size:14px;
  }
  
  li {
    padding:10px 10px;
  }
  
  a {
    text-decoration:none;
    padding:10px 15px;
    color:#fff;
    font-family:"Roboto";
    font-size: 1.5em;
    font-weight: 300;
  }
  
  a:hover {
    text-decoration: line-through;
    color: #0dffec;
  }
  
  .content {
    position:relative;
    width:300px;
  }
  
  .button {
    width:20px;
    height:40px;
    margin:24% 36%;
    padding: 14px;
    cursor:pointer;
  }
  
  .line {
   width: 40px;
   height: 2px;
      background-color: #fff;
   transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
  }
  
  .line.first {
    transform: translateX(-10px) translateY(22px) rotate(-90deg);
  }
  
  .line.second {
    transform: translateX(-10px) translateY(19px) rotate(0deg);
  }
  
  .button.on .line.top {
   transform: translateX(-10px) translateY(20px) rotate(45deg);
  }
  
  .button.on .line.bottom {
   transform: translateX(-10px) translateY(17px)rotate(-45deg);
  }
  
  @keyframes fadein {
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-webkit-keyframes fadein { /* Safari and Chrome */
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      
      &lt;title&gt;Home&lt;/title&gt;
      
      &lt;link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway" rel="stylesheet"&gt;
      
      &lt;link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'&gt;
      
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/animate.css"&gt;
  &lt;/head&gt; 
  &lt;body&gt;
      
  &lt;div id="wrapper"&gt;
    &lt;div class="menu"&gt;
        
      &lt;h1&gt;Title&lt;/h1&gt;
        
      &lt;ul&gt;
         &lt;div id="home" onclick="homeTransition()"&gt;&lt;li&gt;&lt;a href="#home"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; home&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
         &lt;div id="about" onclick="aboutTransition()"&gt;&lt;li&gt;&lt;a href="#about"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; about&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
         &lt;div id="projects" onclick="projectsTransition()"&gt;&lt;li&gt;&lt;a href="#projects"&gt;&lt;i class="fa fa-code"&gt;&lt;/i&gt; projects&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
         &lt;div id="contact" onclick="contactTransition()"&gt;&lt;li&gt;&lt;a href="#contact"&gt;&lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt; contact&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
      
    &lt;div class="content"&gt;
      &lt;div class="button"&gt;
        &lt;div class="line first top"&gt;&lt;/div&gt;
        &lt;div class="line second bottom"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      
      
      
      &lt;div id="aboutContent"&gt;
      
      &lt;/div&gt;
      
      &lt;div id="projectsContent"&gt;
      
      &lt;/div&gt;
      
      &lt;div id="contactContent"&gt;
      
      &lt;/div&gt;
      
  &lt;/div&gt;
      
      &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'&gt;&lt;/script&gt;
      
      &lt;script type="text/javascript" src="js/transition.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/background.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>