HTML: Live-Berechnung über Javascript (jQuery) einschließlich Variablen mit Initialisierung

i sind sehr neu zu JS und strugle mit folgendem Problem:HTML: Live-Berechnung über Javascript (jQuery) einschließlich Variablen mit Initialisierung

Ich mag Vorspiel den Wert in der numberbox in der Antwort an durch jede Änderung der umwandeln der Wert. Einbinden der Variablen NP0, NP1 und DP0 aus dem HTML-Element.

------------------------- UPDATE 1 ------------------- -------

Um HTML-Variablen in Javascript zu verwenden, können wir dies über data- * -Attribute tun. Danke an Luca.

Aber wie kann ich eine Berechnung initiieren, wenn die Seite zum ersten Mal geladen wird?

Und wie kann die Berechnung bei jeder Änderung des Wertes ausgeführt werden?

$(".slide").on('change mousemove', function() { 
 
     $(this).next(".text").text(this.value) 
 
    }); 
 
    $(".calc").on('change paste keyup', function() { 
 
     $(this).next(".text").text((128+(this.value*0.0625))/1) 
 
    });

<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script> 
 

 
<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label> 
 

 
<br> 
 
<br> 
 
<input name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= <label class="text"></label> km/h

Quelle

2016-07-27 stahlstngel

helfen Warum sind Sie nach 1 in der vorletzten Zeile Ihres JavaScript Dividieren? – kamoroso94

Weil die Spezifikation dies beseitigt, aber dies ist nur ein Beispiel aus einem Standard. – stahlstngel

Aufruf auf Body Load-Ereignis zum ersten Mal Seite laden und $ (this) .next() funktioniert für Sie –

Sie benötigen Data- * Attribute, so sollten Sie Ihre HTML

<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label> 
<br> 
<br> 
<input name="period" class="calc" value="0" min="0" max="4096" type="number" data-NP0="128" data-NP1="0.00625" data-DP0="1">= <label class="text"></label> km/h

und Ihr Skript

sein

$(".slide").on('change mousemove', function() { 
     $(this).next(".text").text(this.value) 
}); 
$(".calc").on('change paste keyup', function() { 
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0")) 
});

UPDATE 1

Um Ihren Wert sofort zu berechnen, wenn Sie benötigt Ereignisse abonnieren, Sie Trigger ein „change“ -Ereignis zwingen können, so sollte Ihr Skript

$('.calc').on('change paste keyup', function(){ 
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0")); 
    }).trigger('change');

Leider werden ich einen Punkt :) Um kontinuierlichen Rechen verpassen während mit den Tasten Spinnen, können Sie das "Input" Ereignis, so dass Ihr Code

$('.calc').on('change paste keyup input', function(){ 
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0")); 
    }).trigger('change');

ich die Geige aktualisiert werden hinzufügen, wieder

Here a jsfiddle

Quelle

2016-07-27 15:31:22 Luca

Nein, der Diawert wird nicht benötigt. – stahlstngel

Großartig. Danke, das löst mein erstes Problem. Wie kann ich die Berechnung starten, wenn ich die Seite lade? Und gibt es eine Möglichkeit, die Berechnung für jede Änderung des Werts auszuführen (z. B. wenn ich den Wert butt hochklicke und halte)? – stahlstngel

Lecker !!! Das löst alle meine Probleme und funktioniert gut. Groß. Danke für Ihre Hilfe. – stahlstngel

-1

 <html> 
     <head> 
      <script src="http://code.jquery.com/jquery-2.2.2.min.js">/script> 
      <script type="text/javascript"> 
    function Load(){ 
      $(document).ready(function(){ 
       $(".slide").on('change mousemove', function() { 
       $(this).next(".text").text(this.value); 

       }); 
        $(".calc").on('change paste keyup', function() { 
        var value = $('#abc').val(); 
        $(this).next(".text").text((128+ value*0.0625)/1) 
       }); 
      }); 
} 
      </script> 
     </head> 
     <body onLoad="Load()"> 
      <input id="period" name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"> 

      <label class="text">0.25</label>  <br><br> 

      <input id ="abc" name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= 
      <label class="text"></label> km/h 
     </body> 
    </html>

können Sie ID verwenden und der Wert durch sie bekommen für Hoffnung aktualisieren

Quelle

2016-07-28 09:18:25

HTML: Live-Berechnung über Javascript (jQuery) einschließlich Variablen mit Initialisierung

Antwort

Verwandte Themen