スイッチでは、JavaScriptとjQueryを使用してベースコンバータを構築するために、フォームからテキスト入力を検証しようとしている

Question

I`mが動作していません。 addEventListener関数を使用すると、Selectタグからオプション "2"、 "10"、 "16"に対応するスイッチケースを呼び出すことができました。

問題は、それが唯一の選択タグとするとき、私は塩基から減少に最初の「変更」イベントのために働いているということです。例：ベース2を選択して10または16に変更した場合でも、16または10に変更しても0または1の文字しか受け入れられません。どうすれば修正できますか？

$(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 < 48 || key.charCode > 49) && (key.charCode != 13)) { return false; } 
 
     }); 
 
     break; 
 

 
     case '10': 
 
     $('#number').keypress(function(key) { 
 
     if((key.charCode < 48 || key.charCode > 57) && (key.charCode != 13)) { return false; } 
 
     }); 
 
     break; 
 

 
     case '16': 
 
     $('#number').keypress(function(key) { 
 
     if((key.charCode < 48 || key.charCode > 57) && (key.charCode < 97 || key.charCode > 102) && (key.charCode < 65 || key.charCode > 70) && (key.charCode != 13)) { return false; } 
 
     }); 
 
     break; 
 

 
    } // End switch 
 

 
    }); // End addEventListener 
 

 
}); // End document.ready

.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 > * { 
 
    margin: 10px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <form action="index.php" method="post"> 
 

 
    <div class="form-group flex-center"> 
 
     <label>From Base:</label> 
 
     <select id="frombase-select" name="frombase"> 
 
     <option selected disabled hidden>Enter a base</option> 
 
     <option>2</option> 
 
     <option>10</option> 
 
     <option>16</option> 
 
     </select> 
 
    </div> 
 

 
    <div class="form-group flex-center"> 
 
     <label>Number:</label> 
 
     <input type="text" id="number" name="number"> 
 
    </div> 
 

 
    </form> 
 
</div>

Answer 1

問題は、イベントハンドラを積み上げているということです。

は、ここに私のコードです。ハンドラをリセットすることはありません。したがって、最初に選択したベースの検証はバインドされません。これにより、最初に選択されたケースのコールバックだけがトリガされます。

あなたは、以前のハンドラを削除するoffを使用することができます。ドキュメントから：

説明：イベントハンドラを削除します。

.off(event)

イベント

種類：イベント

jQuery.Eventオブジェクト。

イベントハンドラを削除するためにイベント名を文字列として渡すことができます。

$("#number").off("keypress"); //Callback is optional 

Here's更新フィドル：イベントハンドラを削除するデモンストレーションoff。