同じ入力ボックスの出力値

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を使用して、インラインイベントハンドラを削除するのが最も簡単です。私はあまりインラインJavaScriptを使用して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

。他のスクリプトにデータを渡していないので、フォームを使う必要もありません。単に入力とボタンを使ってすべてを行うことができます。

これは完璧です更新例>>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); 
    } 


});