Ausgabewert in der gleichen Eingabebox

Question

Ich versuche, eine Funktion zu verwenden, die eine Zahl in römische Ziffern umwandelt, um den konvertierten Wert in demselben Feld anzuzeigen, in dem es eingegeben wurde. Like this converter.

Ich habe dies versucht:

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

Aber es erfrischt nur die Seite und tut nichts, um die eingegebene Nummer ...

Here's the full code (Entschuldigung, es ist kein JSFiddle, konnte das Formular nicht zum Arbeiten dort bekommen).

Jede Hilfe wäre willkommen, und danke im Voraus! :)

Answer 1

Uncaught ReferenceError: convert is not defined

Die convert Funktion ist für Ihre onsubmit Ereignis außerhalb des Gültigkeitsbereichs. Dies wirft einen Fehler auf und stoppt die Ausführung des restlichen Skripts, so dass die return false nie passiert und die Seite aktualisiert wird.

Sie convert auf dem globalen Bereich erklären konnten, bevor es

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

Explizit legt es auf dem globalen Bereich in Ihrer Ready-Funktion

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

oder die bevorzugte Art und Weise legen Sie Ihre Event-Listener mit un- obtrusevly in unserer Dokument-Ready-Funktion, so dass Convert im Umfang ist.

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

Sie kombinieren Inline-Event-Handler und jQuery-Handler. Ihre convert-Funktion ist nicht im Gültigkeitsbereich des Formulars, da sie sich im Block $(document).ready() befindet. Ich würde empfehlen, die Handler Bindung 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

Sie werden erfassen müssen und verhindern, dass die Veranstaltung einreichen passiert, so dass die Form nicht vorlegen, und die Seite neu geladen.

Gerade jetzt Ihre convert() Funktion ist außerhalb des Bereichs, da der Inline-Event-Handler wird erwartet, dass es global zu sein, aber es in document.ready macht es nicht globale Verpackung.

Am einfachsten wäre es, mehr jQuery zu verwenden und die Inline-Event-Handler zu entfernen.

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

würde ich weniger inline verwenden JavaScript und lassen jQuery den Job alle tun. Sie müssen auch kein Formular verwenden, da Sie keine Daten an ein anderes Skript übergeben.Sie können einfach die Eingabe und die Schaltfläche verwenden, um alles zu tun.

siehe aktualisiert Beispiel >>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); 
    } 


});