javascript - 如何制作开关按钮/反转按钮。类似于 谷歌翻译

Question

我正在制作一个小计算器，可以将千克换算为磅，也可以将磅换算为千克，然后写在输入上。但是，我想只用一个按钮来计算!明白了吗？

KG to POUNDS -> KG * 2.2046

POUNDS to KG -> POUNDS / 2.2046

示例 1:

Field 1: 50 kg

....calc...

Field 2 (result): 110.23 Pounds

然后会有一个让我更改功能的按钮(每次点击谷歌翻译时都会更改语言的按钮)我点击然后..

示例 2:

Field 1: 100 pounds

...calc...

Field 2 (result): 45.35

你能明白我在做什么吗？

function calcPD(){
    
    var pound = document.getElementById("field1").value;
    var calc = quilos / 2.2046;
    var resul = document.getElementById("pound").value=calcularr.toFixed(2);        
    }
                    
function calcKg(){      
    
    var kg = document.getElementById("field1").value;
    var calc = quilo * 2.2046;
    var resul = document.getElementById("pound").value=calcular.toFixed(2);                         
    }
 funcion invert(){

      ???
 }

Answer 1

我认为你正在寻找的只是一个简单的变量来跟踪你所处的“模式”。我已经为你构建了一个例子来看看它是如何工作的(我使用 bootstrap 来使它漂亮，但显然这是可选的):

https://jsfiddle.net/DTcHh/13851/

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            Input: 
            <input id="inputNum" class="form-control" type="number"></input>
        </div>

        <div class="col-xs-6">
            Output: 
            <input id="outputNum" class="form-control" type="text" disabled></input>
        </div>
    </div>

    <span id="modeText">lbs to kg</span>
    <button id="switch" class="btn pull-right">Switch</button> 
</div>

Javascript

//0 = lbs to kg, 1 = kg to lbs
var mode = 0;

var inputNum = $("#inputNum");
var outputNum = $("#outputNum");
var switchMode = $("#switch");
var modeText = $("#modeText");

var calculateKgs = function() {
    outputNum.val(inputNum.val()/2.2046);
};

var calculateLbs = function() {
    outputNum.val(inputNum.val()*2.2046);
};

var calculate = function() {
    if(mode == 0)
        calculateKgs();
    else
        calculateLbs();
};

inputNum.change(calculate);
inputNum.keyup(calculate);

switchMode.click(function() {
    if(mode) {
        mode = 0;
        modeText.text("lbs to kg");
    }
    else {
        mode = 1;
        modeText.text("kg to lbs");
    }

    calculate();
});