Jquery show or hide elements based on input value?

Question

Hey I would like to know how to show a div and hide another at the same time. And that it only does that when I give an input of 5 or higher:

<div class="InputField InputMeters">
   <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" 
          data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="">
   <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>

this needs to show: <div id="testje" class="CalculatorRight" style="display:none">

This needs to hide: <div id="SummaryHTML" class="CalculatorRight">

The code I use now that only focuses on input and not on input's value:

$('#FenceMeters').on('input', function() {
      $('#testje').show();
      $('#SummaryHTML').hide();
});

Answer 1

You can use the current value and check using Number.parseInt

$('#FenceMeters').on('input', function() {
  const value = $(this).val();
  if (Number.parseInt(value) >= 5) {
    $('#testje').show();
    $('#SummaryHTML').hide()
  } else {
    $('#testje').hide();
    $('#SummaryHTML').show()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="InputField InputMeters">
  <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="">
  <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>

<div id="testje" class="CalculatorRight" style="display:none">hidden</div>

<div id="SummaryHTML" class="CalculatorRight">shown</div>

Answer 2

try below solution.

$('#FenceMeters').on("change paste keyup", function() {
  var val = $(this).val();
  if (val >= 5) {
    $('#testje').show();
    $('#SummaryHTML').hide();
  } else {
    $('#testje').hide();
    $('#SummaryHTML').show();
  }
});

.hidden {
  display: none;
}

.CalculatorRight {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="InputField InputMeters">
  <input type="tel" name="iFenceMeters" id="FenceMeters" class="AutosubmitCalculator" data-minimum-length="1" tabindex="1" placeholder="00" maxlength="3" value="">
  <div class="FormExclamation Tipped Hidden" id="FormCalculatorExclamationFence">0</div>
</div>
<div id="testje" class="CalculatorRight hidden"> testje </div>
<br/>
<div id="SummaryHTML" class="CalculatorRight">SummaryHTML </div>