Javascript 同一输入框中的输出值

我试图使用一个函数，将数字转换为罗马数字，在输入的同一个框中显示转换后的值

我试过这个：

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;
    } 
});

$（文档）.ready（函数（）{
函数转换（num）{
VarAra=[10009005004001009050，40，10，6，5，4，1]；
变量rom=['M'，CM'，D'，CD'，C'，XC'，L'，XL'，X'，IX'，V'，IV'，I']；
var final=''；
对于（变量i=0；i=ara[i]）{
最终+=rom[i]；
num-=ara[i]；
}
}
返回最终结果；
} 
});

但它只是刷新页面，对输入的数字不做任何操作

（很抱歉，它不是JSFIDLE，无法使表单在那里工作）

欢迎提供任何帮助，并提前表示感谢！：）

未捕获引用错误：未定义转换

convert

函数超出了

onsubmit

事件的范围。这会引发错误并停止执行脚本的其余部分，因此

返回false

不会发生，页面将刷新

在使用全局作用域之前，可以在全局作用域上声明

convert

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

在ready函数中显式地将其放在全局范围内

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

或者，在我们的document ready函数中不显眼地附加事件侦听器的首选方法，以便convert在范围内

$(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) {

---

您正在组合内联事件处理程序和jQuery处理程序。您的

convert

函数不在表单范围内，因为它位于

$（document）.ready（）

块中。我建议使用jQuery绑定处理程序：

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

---

$（文档）.ready（函数（）{
$（'form'）。on（提交，函数（e）{
e、 预防默认值（）；
var num=$（'#number'）.val（）；
VarAra=[10009005004001009050，40，10，6，5，4，1]；
变量rom=['M'，CM'，D'，CD'，C'，XC'，L'，XL'，X'，IX'，V'，IV'，I']；
var final=''；
对于（变量i=0；i=ara[i]）{
最终+=rom[i]；
num-=ara[i]；
}
}
$（'数字'）.val（最终）；
});
});

您必须捕获并防止发生提交事件，以便表单不提交，页面重新加载

现在，您的

convert（）

函数超出了作用域，因为内联事件处理程序希望它是全局的，但将它包装在

文档中。ready

使它不是全局的

最简单的方法是使用更多jQuery，并删除内联事件处理程序

$（文档）.ready（函数（）{
$（'form[name=“f”]”）。在（'submit'，函数（e）上{
e、 预防默认值（）；
VarAra=[10009005004001009050，40，10，6，5，4，1]；
变量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=''；
对于（变量i=0；i=ara[i]）{
最终+=rom[i]；
num-=ara[i]；
}
}
val（final.focus（）；
});
});
我会少用内联javascript，让jQuery完成所有工作。您也不需要使用表单，因为您不向任何其他脚本传递任何数据。您只需使用输入和按钮即可完成所有操作

参见更新的示例>>

$（文档）.ready（函数（）{
$（“#转换”）。单击（函数（）{
convert（）；
});
函数转换（）{
var num=$（'.texty'）.val（）；
VarAra=[10009005004001009050，40，10，6，5，4，1]；
变量rom=['M'，CM'，D'，CD'，C'，XC'，L'，XL'，X'，IX'，V'，IV'，I']；
var final=''；
对于（变量i=0；i=ara[i]）{
最终+=rom[i]；
num-=ara[i]；
}
}
$（'.texty'）.val（最终版本）；
}
});
这太完美了，谢谢！简单+高兴的是形式已经过时了。
$(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);
    });
});

$(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);
    }


});