摄氏温度到华氏温度的转换 - 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;

问题是，当你点击提交，两个输入字段失去焦点，它是“活跃”的按钮。您需要为每个输入监听onfocus，并记下最后点击哪个输入。 – Emissary

我改变了这个问题来解释这一点。谢谢：） – Janine

答

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;

答

我已更正您的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(); 
};

摄氏温度到华氏温度的转换 - JavaScript

相关推荐