title: Jquery: On execution of $("#divId").droppable({over: function(), how can I have an if-else function execute with random variables and functions?
body: <p>Most of my code is "working" how I want it besides for some basic css that I need to tweak. On the execution of $("#divId").droppable({over: function() in my code, I want 2 other functions and have one of them be executed randomly on out:function() that is executed in the droppable.() 
  <br>
  <br>
  (I am New to all coding languages, so bear with me.)
  <br>
  <br>
  This is what I have working . . .</p>
  
  <pre><code>    $("#droppable").droppable({
      over: function() {
          $(this).find('p').html('Reading...');
      },
  
      out: function() {
          $(this).find('p').html('Please Swipe Again At This Website To Enter');
      },
  
      revert: function() {
          $(this).find('p').html('');
      },
  
      drop: function() {
          $(this).find('p').html('Error Reading Your Card');
  
      }
  });
  </code></pre>
  
  <p><br>
  <br></p>
  
  <p>This is what I am working on trying to do . . . <br>
  I want a random variable on the out function to "choose" one function or the other to execute. One of the functions hides some divs and makes one appear the other just changes the text in the paragraph in #droppable. This code looks setup correctly, but I am sure there is some syntax error I am not catching.</p>
  
  <pre><code> $("#droppable").droppable({
      over: function() {
          $(this).find('p').html('Reading...');
      },
  
      out: function() {
      var number = 1 + Math.floor(Math.random() * 2);
  
          if (number == 2) {
              $('#draggable, #draggable2, #droppable, #upperSwiper, #swiper').hide();
              $('#hi').show();
          } else {
              $(this).find('p').html('Please Swipe Again At This Website To Enter');
          },
  
      revert: function() {
          $(this).find('p').html('');
      },
  
      drop: function() {
          $(this).find('p').html('Error Reading Your Card');
  
      }
  }); 
  </code></pre>
  
  <p>This is my working code, the css is a bit off because of the size of the snippet code box and the card snaps to the top so ignore that, but it works how I want it to besides for the mentioned function(s) above. You swipe the card through the area, and certain messages appear depending on how the draggable object reacts to the droppable area.</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() {
    $("#draggable").draggable({
      containment: 'body',
      revert: function(dropped) {
        var $draggable = $(this),
          hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
          wasJustDropped = dropped &amp;&amp; dropped[0].id == "droppable";
        if (wasJustDropped) {
          // revert, it's in the droppable
          return true;
        } else {
          if (hasBeenDroppedBefore) {
            // don't rely on the built in revert, do it yourself
            $draggable.animate({
              top: 0,
              left: 0
            }, 'slow');
            return false;
          } else {
            // just let the build in work, although really, you could animate to 0,0 here as well
            return true;
          }
        }
      }
    });
  
  
  
  
  
    $("#droppable").droppable({
      over: function() {
        $(this).find('p').html('Reading...');
      },
  
      out: function() {
        $(this).find('p').html('Please Swipe Again At This Website To Enter');
      },
  
      revert: function() {
        $(this).find('p').html('');
      },
  
      drop: function() {
          $(this).find('p').html('Error Reading Your Card');
  
        }
        //  random generated function I am trying to make
        /*   $("#droppable").droppable({
       over: function() {
              $(this).find('p').html('Reading...');
          },
          
          out: function() {
          var number = 1 + Math.floor(Math.random() * 2);
       
        if (number == 2) {
         $('#draggable, #draggable2, #droppable, #upperSwiper, #swiper').hide();
         $('#hi').show();
        } else {
         $(this).find('p').html('Please Swipe Again At This Website To Enter');
           },
          revert: function() {
            $(this).find('p').html('');
              },
  
          drop: function() {
          $(this).find('p').html('Error Reading Your Card');
                });
  });  
              */
    });
  });  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hi {
    width: 50%;
    height: 50%;
    position: relative;
    margin: 0 auto;
    display: none;
  }
  div.blackBar {
    position: relative;
    background-color: black;
    width: 200px;
    height: 23px;
    top: 75%;
  }
  div.frontSwiper {
    background-color:
    /* #A9A9A9 */
    transparent;
    width: 85%;
    height: 65px;
    position: relative;
    -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
    z-index: ;
    border-radius: 10px;
  }
  body {
    width: 90%;
    height: 90%;
    margin: auto;
  }
  #swiper {
    background-color:
    /* #b8b8b8*/
    transparent;
    width: 34%;
    height: 75px;
    margin: 0 auto;
    position: relative;
    Top: 200%;
    z-index: 0;
    border-radius: 0px;
  }
  #upperSwiper {
    background-color: transparent;
    width: 34%;
    height: 75px;
    margin: 0 auto;
    position: relative;
    Top: 5%;
    z-index: 1;
    border-radius: 0px;
  }
  #droppable {
    position: fixed;
    width: 100px;
    Height: 300px;
    border-Width: 1px;
    background-image: none;
    background-color: transparent;
    text-al100: center;
    left: 50%;
  }
  #draggable,
  #draggable2 {
    position: fixed;
    top: 200px;
    width: 200px;
    height: 130px;
    border-Width: 0px;
    background-image: none;
    left: 60%;
    background-color: #FFD700;
    -webkit-clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
    z-index;
    -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;div id="droppable" class="ui-widget-header"&gt;
    &lt;p style="font: italic bold 10px/15px Arial, Sans-serif; width: 50%, position: fixed;"&gt;&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;div id="swiper"&gt;
    &lt;div class="frontSwiper"&gt;&lt;/div&gt;
    &lt;div id="upperSwiper"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="draggable" class="ui-widget-content"&gt;
    &lt;div class="blackBar"&gt;&lt;/div&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>