Berechnung des neuen Werts des geänderten Eingangs

Question

Ich habe 2 Eingänge, wobei ich wöchentlich bis vierzehntägig und umgekehrt berechnen möchte. Bei einer Änderung möchte ich, dass der NEUE Wert berechnet wird. Ich bekomme aber nicht die richtigen Werte (wöchentliche Änderung benötigt den Wert von vierzehntägig, um zwei zu multiplizieren und vierzehntägig zu ändern braucht den Wert von wöchentlich dividiert durch zwei und es wird nur einmal ausgelöst (muss nach jeder Änderung aktualisiert werden).

HTML:

<div class="frequencies"> 
<div> 
    Weekly<br /> 
    <input class="weekly" type="text" value="1000" /> 
</div> 

    <br /><br /> 
    <div> 
    Fortnightly<br /> 
    <input class="fortnightly" type="text" value="2000" /> 
    </div> 

</div> 

JQuery:

var weekly = $("input.weekly").val(), 
    fortnightly = $("input.fortnightly").val(); 

w2f = parseFloat(weekly, 10) * 2; 
f2w = parseFloat(fortnightly, 10)/2; 

$("input.weekly").on("change paste", function() { 
    $(this).closest('.frequencies').find('input.fortnightly').val(w2f); 
}); 

$("input.fortnightly").on("change paste", function() { 
    $(this).closest('.frequencies').find('input.weekly').val(f2w); 
}); 

Hier ist eine Geige des Codes: https://jsfiddle.net/nh12du38/3/

Dies sollte eine einfache Sache, aber ich sehe es nicht. Was mache ich falsch?

Answer 1

Sie müssen beachten, dass wenn Sie einer Variablen außerhalb der Funktion im Listener einen Wert zuweisen, der Wert nur einmal beim Laden des Skripts gesetzt wird und in diesem Zustand bleibt.

Sie müssen die Logik in jedem Listener verschieben. Wenn die oder paste Ereignisse stattgefunden haben, laden die Variablen einen neuen, tatsächlichen Wert.

$("input.weekly").on("change paste", function() { 
 
    w2f = parseFloat($("input.weekly").val(), 10) * 2; 
 
    f2w = parseFloat($("input.fortnightly").val(), 10)/2; 
 
    $(this).parent().parent().find('input.fortnightly').val(w2f); 
 
}); 
 

 
$("input.fortnightly").on("change paste", function() { 
 
    w2f = parseFloat($("input.weekly").val(), 10) * 2; 
 
    f2w = parseFloat($("input.fortnightly").val(), 10)/2; 
 
    $(this).parent().parent().find('input.weekly').val(f2w); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="frequencies"> 
 
    <div> 
 
    Weekly 
 
    <br /> 
 
    <input class="weekly" type="text" value="1000" /> 
 
    </div> 
 

 
    <br /> 
 
    <br /> 
 
    <div> 
 
    Fortnightly 
 
    <br /> 
 
    <input class="fortnightly" type="text" value="2000" /> 
 
    </div> 
 

 
</div>