<select id='select-one' required>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

<select id='select-two' required>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

<button id='trueOrFalse'>Send</button>
body {
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  padding: 50px; }

select {
  flex-basis: 30%; }
View Compiled
/* Listen to the second input because they're both required */
/* Run a retrieval function that will return the value of a variable */
function wantToReturnTrueOrFalse() {
  
  var inputToCompareTo = document.querySelector('#select-one');
  var inputToListenFor = document.querySelector('#select-two');
  let isTrueOrFalse;
  
  inputToListenFor.addEventListener('change', function() {
    
    if (inputToListenFor.value > inputToCompareTo.value) {
      isTrueOrFalse = true;
      retrieveFromListener(isTrueOrFalse);
    } else {
      isTrueOrFalse = false;
      retrieveFromListener(isTrueOrFalse);
    }
  
  });
  
  return function() {
    return isTrueOrFalse;
  }

}

/* Check for the returned value from the selects */
/* Console log what the end result would be of the comparison (send or do not send) */
function trueOrFalse() {
  
  var inputTrueOrFalse = document.querySelector('#trueOrFalse');
  let answer = wantToReturnTrueOrFalse();
  
  inputTrueOrFalse.addEventListener('click', function() {
    
    if (answer()) {
      console.log('send that ish');
    } else {
      console.log('don’t send that ish');
    }
    
  });
  
}

wantToReturnTrueOrFalse();
trueOrFalse();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.