동일한 입력 상자의 출력 값

Question

숫자를 로마 숫자로 변환하여 변환 된 값을 입력 한 것과 동일한 상자에 표시하는 기능을 사용하려고합니다. Like this converter.

나는이 시도했다 :

HTML

<form name="f" onsubmit="this.box.value = convert(this.box.value); this.box.focus(); return false;"> 
    <input type="text" name="box" class="texty"> 
    <div style="padding-top:10px"></div> 
    <input type="submit" value="Convert"> 
</form> 

JS

$(document).ready(function() {  
    function convert(num) { 
     var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
     var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
     var final = ''; 
     for (var i = 0; i < rom.length; i++) { 
      while (num >= ara[i]) { 
       final += rom[i]; 
       num -= ara[i]; 
      } 
     } 
     return final; 
    } 
}); 

그러나 그것은 단지 페이지를 새로 고치고 입력 된 번호로 아무것도하지 않습니다 ...

Here's the full code (미안하지만 JSFiddle이 아니기 때문에 양식을 사용할 수 없습니다).

도움이 될 것입니다. 미리 감사드립니다. :)

Answer 1

Uncaught ReferenceError: convert is not defined

convert 기능은 onsubmit 이벤트에 대한 범위를 벗어났습니다. 이렇게하면 오류가 발생하여 나머지 스크립트 실행이 중지되므로 return false이 발생하지 않고 페이지가 새로 고침됩니다. 당신은

$(document).ready(function() { 
    window.convert = function(num) 

또는 선호하는 방법은 이벤트 리스너를 부착

var convert; 
$(document).ready(function() { 
    convert = function(num) 

그것을 사용하여 명시 적으로 준비 함수에서 전역 범위에 넣어 전에 전역 범위에 convert를 선언 할 수

명사에 붙여서의 뜻을 나타냄 obtrusevly 우리의 문서 준비 함수에 있으므로 변환 범위에 있습니다.

$(document).ready(function (event) { 
    $("form").first().on("submit",function(){ 
    var box = document.getElementsByName("box")[0]; 
    box.value = convert(box.value); 
    return false; 
    }); 
    function convert(num) { 

Answer 2

인라인 이벤트 핸들러와 jQuery 핸들러를 결합합니다. 귀하의 convert 함수는 $(document).ready() 블록에 있기 때문에이 양식의 범위에 속하지 않습니다. 당신은 캡처 일어나는 제출 이벤트를 방지해야합니다

<form name="f"> 
    <input type="text" name="box" id="number" class="texty"> 
    <div style="padding-top:10px"></div> 
    <input type="submit" value="Convert"> 
</form> 

---

$(document).ready(function() {  
    $('form').on(submit, function(e) { 
     e.preventDefault(); 
     var num = $('#number').val(); 
     var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
     var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
     var final = ''; 
     for (var i = 0; i < rom.length; i++) { 
      while (num >= ara[i]) { 
       final += rom[i]; 
       num -= ara[i]; 
      } 
     } 
     $('#number').val(final); 
    }); 
}); 

Answer 3

, 그래서 양식을 제출하지 않고 페이지를 다시로드 : 내가 jQuery를 사용하여 처리기를 바인딩 추천 할 것입니다. 인라인 이벤트 핸들러가 글로벌 것으로 기대하지만 하지 글로벌하게 document.ready에 포장되어 있기 때문에

은 지금 당신의 convert() 기능, 범위를 벗어났습니다.

가장 쉬운 jQuery를 사용하고 인라인 이벤트 핸들러를 제거하는 것이 가장 쉽습니다.

$(document).ready(function() { 
 
    $('form[name="f"]').on('submit', function(e) { 
 
    e.preventDefault(); 
 

 
    var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
 
    var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
 
    var box = $(this).find('[name="box"]'); 
 
    var num = box.val(); 
 
    var final = ''; 
 

 
    for (var i = 0; i < rom.length; i++) { 
 
     while (num >= ara[i]) { 
 
     final += rom[i]; 
 
     num -= ara[i]; 
 
     } 
 
    } 
 

 
    box.val(final).focus(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="f"> 
 
    <input type="text" name="box" class="texty"> 
 
    <div style="padding-top:10px"></div> 
 
    <input type="submit" value="Convert"> 
 
</form>

Answer 4

나는 jQuery를 모든 일을 할 수 있도록 자바 스크립트 덜 인라인을 사용하십시오. 또한 다른 스크립트로 데이터를 전달하지 않으므로 양식을 사용할 필요가 없습니다.모든 것을하기 위해 입력과 버튼을 사용하기 만하면됩니다.

업데이트를 참조하십시오 예 >>http://codepen.io/anon/pen/AXmwdR

$(document).ready(function() { 
    $('#convert').click(function(){ 
    convert(); 
    }); 


    function convert() { 
     var num = $('.texty').val(); 
     var ara = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 6, 5, 4, 1]; 
     var rom = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']; 
     var final = ''; 
     for (var i = 0; i < rom.length; i++) { 
      while (num >= ara[i]) { 
       final += rom[i]; 
       num -= ara[i]; 
      } 
     } 
     $('.texty').val(final); 
    } 


});