Question

我正在让Celcius成为Farenheit计算器。我的codepen在这里：https://codepen.io/j9k9/pen/zBZJQL 我试图这样做，以便如果celcius输入处于活动状态，则调用转换为farenheit函数，反之亦然，并且仅在单击提交按钮时才进行转换。我还尝试了一个if / else语句，用于活动表单id无效。

代码如下：

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;

Answer 1

我已更正了您的code-pen，并注意到可以改进的位置，原因和内容，但有人似乎删除了我的评论。由于还没有具体的答案，我会把它转移到这里。

如果您不希望它动态更新，请删除这两行：

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

而是根据最后使用的输入框确定脚本将运行的转换“mode”。

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

注意： 在转化功能中，以下行无用（删除它们）。

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

在表达式中使用时，变量将在适当的位置强制转换为Number - 在您希望明确表示的情况下，您应该执行此转换之前使用该值执行计算。< / p>

»另请参阅：Javascript Unary Operator作为另一个示例。

接下来为你的按钮设置一个监听器，注意你不能简单地将conversionFn附加到事件处理程序本身，因为这会立即分配一个不变的引用（或undefined），这是没用的 - 相反，将变量封装在新函数闭包的范围内。

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

Answer 2

请改用这些功能。

function getFahrenheitFromCelsius(celsius){
   return (celsius * (9 / 5)) + 32;
}

function getCelsiusFromFahrenheit(fahrenheit){
   return (fahrenheit - 32) * (5 / 9);
}

Answer 3

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;

Celsius到Fahrenheit转换 - JavaScript

3 个答案: