title: Check if element has class
body: <p>Trying to find a way to display a console.log when a div is clicked. I am trying do do a simple game, if you click on the right box, you will get a message that you won.</p>
  
  <p>as of now I am struggling with the bottom of my code, this part in particular: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function winningBox(){
  
   if (boxes.hasClass){
  
    console.log('you win');
   } else {
    console.log('you lose');
   }
  }
  winningBox();</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I get this to work? if box clicked has class of 'winning' the message should console.log winning. Please take a look. By the way I need to complete this on Vanilla JavaScript</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//cup game
  //add three cups to screen
  //select li element
  var button;
  var boxes = document.getElementsByTagName('li');
  var array = [];
  console.log('working');
  
  document.addEventListener('DOMContentLoaded', init);
  
  function init() {
    document.addEventListener('click', winningBox);
  
  
    //shuffle li elements, and ad an id
    function test(boxes) {
      var randomBox = boxes[Math.floor(Math.random() * boxes.length)];
      array.push(randomBox);
      console.log('randombox:', randomBox);
      randomBox.classList.add('winning');
  
    }
    console.log(test(boxes));
  
  
    //user can click on a cup to see if correct
    function winningBox() {
  
      if (boxes.hasClass) {
  
        console.log('you win');
      } else {
        console.log('you lose');
      }
    }
    winningBox();
  
    //if cup is incorrect, display message
    //if correct, display won message
    //button to restart game
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #bdc3c7;
  }
  
  .main {
    background-color: #2c3e50;
    width: 300px;
    height: 100px;
  }
  
  li {
    background-color: gray;
    width: 80px;
    height: 80px;
    margin: 10px;
    list-style-type: none;
    display: inline-block;
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;container class="main"&gt;
      &lt;ul&gt;
        &lt;li&gt;1&lt;/li&gt;
        &lt;li&gt;2&lt;/li&gt;
        &lt;li&gt;3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/container&gt;
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>