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

您必须捕获并阻止提交事件发生，因此表单不会提交，页面会重新加载。

现在你的convert()函数超出了范围，因为内联事件处理程序期望它是全局的，但是将它包装在document.ready中会使它不全局。

最简单的方法是使用更多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 2

您正在组合内联事件处理程序和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>

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

我使用较少的内联javascript并让jQuery完成所有工作。您也不需要使用表单，因为您没有将任何数据传递给任何其他脚本。您只需使用输入和按钮即可完成所有操作。

查看更新的示例＆gt;＆gt; 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);
    }


});

Answer 4

未捕获的ReferenceError：未定义转换

convert功能超出了onsubmit事件的范围。这会抛出错误并停止执行其余的脚本，因此return false永远不会发生，页面会刷新。

您可以在使用之前在全局范围内声明convert

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

明确地将它放在准备好的函数中的全局范围

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

或者首选方法是在我们的文档就绪函数中将您的事件侦听器非文本附加，以便转换在范围内。

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

同一输入框中的输出值

4 个答案: