Select 태그에서 addEventListener를 기반으로하는 스위치가 작동하지 않습니다.

Question

javascript와 Jquery를 사용하여 기본 변환기를 작성하기 위해 양식의 텍스트 입력을 확인하려고합니다. 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 객체 이벤트

.

이벤트 핸들러를 제거하기 위해 이벤트 이름을 문자열로 전달할 수 있습니다. 데모 off 이벤트 핸들러를 제거합니다 :

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

Here's 업데이트 된 바이올린.