How to call on a function in a if statement in JavaScript?

I can't figure out how the function showInputE() isn't being prepossessed. I have some if statements within a function. If the if statements are true then they should preform a function. I want the functions to hide or show the the inputs in the easyAssignments div, depending on what the user inputs in numEAI. (Example: user inputs 3, only 3 input boxes will show) However when i click the enter button nothing appears to happen.

   <div id ="numEA">
  <p>How many easy assignments do you have to do today?</p>
  <input min="0" max="5" type="number" id="numEAI">
  <button class="w3-button w3-red" onclick="showInputE()">Enter</button>
</div>


<div id="easyAssignments">
    <p>What easy assignments do you have to do today?</p>
      <input type="text" id="easyA1">
      <input type="text" id="easyA2">
      <input type="text" id="easyA3">
      <input type="text" id="easyA4">
      <input type="text" id="easyA5">


</div>

<script>



  /* START of show input functions */

  function onlyShowInput1(){
      document.getElementById("easyA2").style.display = "none";
      document.getElementById("easyA3").style.display = "none";
      document.getElementById("easyA4").style.display = "none";
      document.getElementById("easyA5").style.display = "none";
      }
  function onlyShowInput2(){
      document.getElementById("easyA3").style.display = "none";
      document.getElementById("easyA4").style.display = "none";
      document.getElementById("easyA5").style.display = "none";
      }


  /* END of show input functions */

  function showInputE(){
  var numEAI = document.getElementById('numEAI');

    if (numEAI === 1){
        onlyShowInput1();
    } else if (numEAI === 2){
        onlyShowInput2();
      }

  }

</script>