如何制作一个开关 button/reverse 按钮。类似于 google 翻译

Question

我正在做一些计算，将 KG 转换为磅和磅转换为 KG，然后在输入上写下。但是，我只想用一个按钮来计算！明白了吗？

KG 换算磅 -> KG * 2.2046

磅换算 KG -> 磅 / 2.2046

示例 1：

第 1 场：50 公斤

..计算...

字段 2（结果）：110.23 磅

然后会有我更改功能的按钮（Google Translate 的按钮每次点击都会更改语言）我点击然后..

例二：

字段 1：100 磅

...计算...

字段 2（结果）：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

听起来您需要使用 innerHtml。一些基本的伪逻辑给你：

var a = document.getElementById("one").innerHtml;
var b = document.getElementById("two").innerHtml;

document.getElementById("one").innerHtml = b;
document.getElementById("two").innerHtml = a;

Answer 2

我认为您正在寻找的只是一个简单的变量，用于跟踪您所处的 "mode"。我已经为您构建了一个示例来了解它是如何工作的（我使用 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();
});

如何制作一个开关 button/reverse 按钮。类似于 google 翻译

How to make a switch button/reverse button. Similar to google translate

html

javascript

javascript-events