攝氏溫度到華氏溫度的轉換 - JavaScript

我正在把攝氏度做成華氏度計算器。我的codepen在這裏：https://codepen.io/j9k9/pen/zBZJQL 我想這樣做，如果celcius輸入是活動的，轉換爲farenheit函數被調用，反之亦然，轉換隻發生在提交按鈕被點擊。我也嘗試了一個if/else語句來處理無效的活動表單ID。攝氏溫度到華氏溫度的轉換 - 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並注意到哪裏，爲什麼以及可以改進哪些內容，但有人似乎刪除了我的評論。由於沒有具體的答案，我會在這裏轉移它。

刪除這兩條線，如果你不希望它在飛行中更新：

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作爲此的另一個示例。

下一頁設置你的按鍵偵聽器，請注意，你不能簡單地附上conversionFn到事件處理程序本身，因爲這將分配一個不變的參考（或undefined）立即它是沒有用的 - 相反，封裝了可變在新功能封閉的範圍內。

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

來源

2016-08-19 10:31:17 Emissary

攝氏溫度到華氏溫度的轉換 - JavaScript

回答

相關問題