Celsius zu Fahrenheit Konvertierung JavaScript

Ich mache Celcius zu Fahrenheit Calculater. Mein Codepen ist hier: https://codepen.io/j9k9/pen/zBZJQL Ich versuche es so zu machen, dass, wenn der celcius-Eingang aktiv ist, die Funktion convert to farenheit aufgerufen wird und umgekehrt und die Konvertierung nur dann erfolgt, wenn der Submit-Button angeklickt wird. Ich habe auch eine If/else-Anweisung für die aktive Formular-ID versucht, die nicht funktioniert hat.Celsius zu Fahrenheit Konvertierung JavaScript

-Code lautet wie folgt:

HTML:

<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Temperature Converter - Part 1</title> 
    </head> 
    <body> 
     <h1>Temperature Converter</h1> 
     <div id="inputs"> 
      <input id="cInput" placeholder="celcius"/> 
      <input id="fInput" placeholder="farenheit"/> 
     </div> 
     <button id="submit">Convert</button> 
     <h1 id="result">Result:</h1> 
     <script src="js/index.js"></script> 
    </body> 
</html>

JS:

document.getElementById("cInput").oninput = function() {convertCToF()}; 
document.getElementById("fInput").oninput = function() {convertFToC()}; 

function convertCToF() { 
    var c = document.querySelector("#cInput").value; 
    var f = c * (9/5) + 32; 

    c = parseInt(c); 
    f = parseInt(f); 

    document.querySelector("#result").innerHTML = ("Result: ") + f + (" \u2109"); 
} 

document.querySelector("#submit").onclick = convertCToF; 

function convertFToC() { 
    var f = document.querySelector("#fInput").value; 
    var c = (f - 32) * 5/9; 

    c = parseInt(c); 
    f = parseInt(f); 

    document.querySelector("#result").innerHTML = ("Result: ") + c + (" \u2103"); 
} 

document.querySelector("#submit").onclick = convertFToC;

Quelle

2016-08-15 Janine

Das Problem ist, wenn Sie auf Senden klicken, verlieren beide Eingabefelder Fokus und es ist die Schaltfläche, die "aktiv" ist. Sie müssen für jeden der Eingänge nach "Onfocus" hören und notieren, welcher Eingang zuletzt geklickt wurde. – Emissary

Ich habe die Frage geändert, um diesen Punkt zu erklären. Vielen Dank :) – Janine

-1

https://codepen.io/anon/pen/mEvzOV

ich dies für Ihre Demo gerade geschrieben haben

function getElm(id){ 
    return document.getElementById(id); 
} 

function readValue(id){ 
    return getElm(id).value; 
} 

function updateHtml(text,id){ 
    getElm(id).innerHTML = text; 
} 


function convertCToF(c) { 
    var f = c * (9/5) + 32; 
    return f; 
} 

function convertFToC(f) { 
    var c = (f - 32) * 5/9; 
    return c; 
} 

function sequnce(){ 
    var val = readValue(activeId); 
    var convertedVal = activeFn(val); 
    updateHtml("Result: "+ convertedVal + activeSuffix,'result') 
} 

var activeFn = convertCToF; 
var activeId = 'cInput'; 
var activeSuffix = "℉" 

getElm('cInput').onfocus = function(){ 
    activeFn = convertCToF; 
    activeId = 'cInput'; 
    activeSuffix = "℉" 
} 

getElm('fInput').onfocus = function(){ 
    activeFn = convertCToF; 
    activeId = 'fInput'; 
    activeSuffix = "℃" 
} 

getElm("cInput").oninput = sequnce; 
getElm("fInput").oninput = sequnce; 
getElm("submit").oninput = sequnce;

Quelle

2016-08-15 09:22:16

Ich hatte Ihre code-pen korrigiert und notiert, wo, warum und was könnte verbessert werden, aber jemand scheint meinen Kommentar gelöscht zu haben. Da es noch keine konkrete Antwort gibt, werde ich sie hier übertragen.

diese beiden Zeilen entfernen, wenn Sie es im laufenden Betrieb zu aktualisieren, nicht wollen:

document.getElementById("cInput").oninput = function() {convertCToF()}; 
document.getElementById("fInput").oninput = function() {convertFToC()};

Statt die „mode“ der Umwandlung auf dem letzten Eingabefeld verwendete basierend wird das Skript entscheiden.

var conversionFn; 
document.querySelector('#cInput').onfocus = function(){ 
    conversionFn = convertCToF; 
}; 
document.querySelector('#fInput').onfocus = function(){ 
    conversionFn = convertFToC; 
};

Hinweis:, dass in der Conversion-Funktionen die folgenden Zeilen nutzlos sind (entfernen).

c = parseInt(c); 
f = parseInt(f);

Wenn in Ausdrücken verwendet werden Variablen auf eine Number gezwungen werden gegebenenfalls - wenn Sie möchten explizit sein Sie diese Konvertierung tun sollten vor Sie eine Berechnung mit dem Wert durchzuführen.

» siehe auch: Javascript Unary Operator als ein weiteres Beispiel dafür.

Next Setup ein Zuhörer für den Button, beachten Sie, dass Sie die conversionFn an den Ereignishandler selbst nicht einfach anbringen, da dies eine einzige unveränderliche Referenz sofort zuordnen (oder undefined), die nicht von Nutzen ist - stattdessen kapselt die Variable im Rahmen einer neuen Funktionsschließung.

Quelle

2016-08-19 10:31:17 Emissary

Celsius zu Fahrenheit Konvertierung JavaScript

Antwort

Verwandte Themen