摂氏から華氏への変換 - JavaScript

私はセルシウスをファレンヘイト計算機にしています。私のcodepenはここにあります：https://codepen.io/j9k9/pen/zBZJQL 私はcelcius入力がアクティブな場合、farenheit関数への変換が呼び出され、逆もまた、送信ボタンがクリックされた場合にのみ変換が行われるようにしようとしています。また、動作しなかったアクティブなフォームIDのif/elseステートメントを試しました。摂氏から華氏への変換 - JavaScript

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;

出典

2016-08-15 Janine

問題は、送信をクリックすると両方の入力フィールドがフォーカスを失い、「アクティブ」のボタンになります。それぞれの入力に対して 'onfocus'を聞き、どの入力が最後にクリックされたのかをメモする必要があります。 – Emissary

私はその点を説明するために質問を変更しました。ありがとう:) – Janine

-1

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

を

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;

出典

2016-08-15 09:22:16

私はあなたのcode-penを訂正し、改善の余地がある理由、理由、改善点について述べましたが、誰かがコメントを削除したようです。具体的な答えがまだないので、私はここでそれを転送します。

あなたはそれがその場で更新したくない場合は、次の2行を削除します。

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

は、代わりにスクリプトを使用し、最後の入力ボックスに基づいて実行される変換のどの「モード」決めます。

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

注：コンバージョン機能に以下の行は、（それらを削除）役に立たないこと。

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

式で使用する場合、変数は適切なNumberに強制変換されます - あなたが値を持つ計算を実行前にこの変換を行う必要があり、あなたが明示的にしたいところ。

»も参照してください：Javascript Unary Operator他の例として、

役に立たない、あなたのボタンのリスナーが、すぐにこれは（または undefined）を、単一の不変の参照を代入しますとあなたは、単にイベントハンドラに自分自身を conversionFnを添付することはできませんのでご注意

次のセットアップ - 代わりに、変数をカプセル化新しい関数クロージャの範囲内にある。

document.querySelector('#submit').onclick = function(){ 
    conversionFn(); 
};

出典

2016-08-19 10:31:17 Emissary

摂氏から華氏への変換 - JavaScript

答えて

関連する問題