Getting a div to show if an input value's length is met

Question

I am trying to run a simple if-statement that checks if the input's value (what is typed in) is at least 5 and then to show the submit button. I tried using the keyup function to detect the value as it is being typed in.

Does anyone see what I am doing wrong?

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('#submit-package').hide();
$('#package-name-input').on('keyup', function() {
  var nameInput = $(this).val().length;
  if (nameInput => 5) {
    $('#submit-package').fadeBoolToggle();
  }
  //$('#package-name-input').val().fadeBoolToggle(length > 5);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="gen-input" id="package-name-input">
<div class="proceed-btn sans-pro" id="submit-package">
  <span class="proceed-btn-text">SUBMIT</span>
</div>

Answer 1

You can pass condition as your function parameter, also you should change => to >=

jQuery.fn.fadeBoolToggle = function(bool) {
  return bool ? this.fadeIn(400) : this.fadeOut(400);
}
$('#submit-package').hide();
$('#package-name-input').on('keyup', function() {
  var nameInput = $(this).val().length;
  $('#submit-package').fadeBoolToggle(nameInput >= 5);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="gen-input" id="package-name-input">
<div class="proceed-btn sans-pro" id="submit-package">
  <span class="proceed-btn-text">SUBMIT</span>
</div>