title: Switch based on addEventListener from Select tag not working
body: <p>I`m trying to validate text inputs from a form to build a base converter using javascript and Jquery. With addEventListener function I was able to call a switch case that corresponds to options "2", "10" and "16" from the Select tag.</p>
  
  <p>The problem is that it is only working for the first "change" event on the Select tag and when I decrease from bases. For example: If I select base 2 and then change to 10 or 16, it still only accepts 0 or 1 characters while changing from 16 to 10 or 2 it works fine. How can i fix it?</p>
  
  <p>Here is my Code:</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>$(document).ready(function() {
    var getFromBase = document.getElementById('frombase-select');
  
    getFromBase.addEventListener('change', function() {
      switch (getFromBase.value) {
        case '2':
          $('#number').keypress(function(key) {
            if ((key.charCode &lt; 48 || key.charCode &gt; 49) &amp;&amp; (key.charCode != 13)) {
              return false;
            }
          });
          break;
  
        case '10':
          $('#number').keypress(function(key) {
            if ((key.charCode &lt; 48 || key.charCode &gt; 57) &amp;&amp; (key.charCode != 13)) {
              return false;
            }
          });
          break;
  
        case '16':
          $('#number').keypress(function(key) {
            if ((key.charCode &lt; 48 || key.charCode &gt; 57) &amp;&amp; (key.charCode &lt; 97 || key.charCode &gt; 102) &amp;&amp; (key.charCode &lt; 65 || key.charCode &gt; 70) &amp;&amp; (key.charCode != 13)) {
              return false;
            }
          });
          break;
      } // End switch
    }); // End addEventListener
  }); // End document.ready</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  form {
    font-size: 20px;
    width: 300px;
    text-align: center;
    border: 1px solid black;
    padding: 20px;
  }
  
  form&gt;* {
    margin: 10px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    &lt;form action="index.php" method="post"&gt;
      &lt;div class="form-group flex-center"&gt;
        &lt;label&gt;From Base:&lt;/label&gt;
        &lt;select id="frombase-select" name="frombase"&gt;
          &lt;option selected disabled hidden&gt;Enter a base&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;10&lt;/option&gt;
          &lt;option&gt;16&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="form-group flex-center"&gt;
        &lt;label&gt;Number:&lt;/label&gt;
        &lt;input type="text" id="number" name="number"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>